chore: update User info component nkowaokwu#619

src/pages/components/UserInformation/UserInfo.js

@@ -1,16 +1,13 @@
 import { Heading } from '@chakra-ui/react';
 import React from 'react';
-import Card from '../Card';
 
 const UserInfo = () => (
-  <Card
-    title="User Information"
-    description="This is your profile information"
-    icon="👤"
-    tooltipLabel="User Information"
-  >
-    <Heading as="h2">Profile</Heading>
-  </Card>
+  <div className="w-full lg:text-left mt-6">
+    <Heading as="h4">User Information</Heading>
+    <p>Name: David Ndubuisi </p>
+    <p>Email: [email protected]</p>
+    <p>Total Daily Usage: 54</p>
+  </div>
 );
 
 export default UserInfo;

src/pages/dashboard.js

@@ -1,21 +1,25 @@
-import { Heading } from '@chakra-ui/react';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import UserInfo from './components/UserInformation';
+import Navbar from './components/Navbar';
 
-const Dashboard = () => (
-  <div
-    className="flex flex-col items-center h-screen"
-    // style={{
-    //   display: 'flex',
-    //   flexDirection: 'column',
-    //   alignItems: 'center',
-    //   justifyContent: 'center',
-    //   height: '100vh',
-    // }}
-  >
-    <Heading as="h1">Dashboard</Heading>
-    <UserInfo />
-  </div>
-);
+const Dashboard = () => {
+  const { t } = useTranslation('dashboard');
+
+  return (
+    <div className="flex flex-col items-center h-screen">
+      <Navbar to="/" />
+      <div
+        className="flex flex-col px-8 mb-6 lg:justify-between xl:flex-row pt-10
+      lg:pt-32 max-w-2xl lg:max-w-6xl h-full text-gray-800 text-lg lg:text-xl w-full"
+      >
+        <div className="max-w-3xl space-y-4 mb-10 text-gray-600">
+          <h1 className="text-3xl text-gray-700">{t('Dashboard')}</h1>
+          <UserInfo />
+        </div>
+      </div>
+    </div>
+  );
+};
 
 export default Dashboard;