Moved Charts to Cards on Home page

flojud · May 17, 2024 · 3ed8b33 · 3ed8b33
1 parent d8681ac
commit 3ed8b33
Show file tree

Hide file tree

Showing 6 changed files with 209 additions and 231 deletions.
diff --git a/src/components/Charts.tsx b/src/components/Charts.tsx
diff --git a/src/components/HomePage.tsx b/src/components/HomePage.tsx
@@ -5,7 +5,7 @@ import MainContainer from './common/MainContainer';
 
 const HomePage = () => {
   const loggedIn = useAppSelector((state) => state.auth.loggedIn);
-  const UserHomePage = lazy(() => import('./UserHomePage'));
+  const UserHomePage = lazy(() => import('./home/UserHomePage'));
   const UnautheticatedHomePage = lazy(() => import('./UnautheticatedHomePage'));
 
   return (

diff --git a/src/components/UserHomePage.tsx b/src/components/UserHomePage.tsx
diff --git a/src/components/VacationGauge.tsx b/src/components/VacationGauge.tsx
diff --git a/src/components/UserHomePageInfoCard.tsx → src/components/home/HomeCard.tsx b/src/components/UserHomePageInfoCard.tsx → src/components/home/HomeCard.tsx
@@ -1,16 +1,16 @@
 import { Card, CardContent, Stack, SvgIconTypeMap, Typography } from '@mui/material';
 import { OverridableComponent } from '@mui/material/OverridableComponent';
+import { PropsWithChildren } from 'react';
 
-interface UserHomePageInfoCardPropertioes {
+interface HomeCardPropertioes {
   title: string;
-  value: string;
   subtitle: string;
   SvgIcon: OverridableComponent<SvgIconTypeMap>;
 }
 
-const UserHomePageInfoCard = ({ title, value, subtitle, SvgIcon }: UserHomePageInfoCardPropertioes) => {
+const HomeCard = ({ title, subtitle, SvgIcon, children }: PropsWithChildren<HomeCardPropertioes>) => {
   return (
-    <Card sx={{ minWidth: 256 }}>
+    <Card sx={{ width: '100%', overflow: 'hidden' }}>
       <CardContent>
         <Stack direction="column" justifyContent="flex-start" alignItems="flex-start" gap={2} width="100%">
           <Stack direction="row" justifyContent="space-between" alignItems="flex-start" gap={2} width="100%">
@@ -20,9 +20,8 @@ const UserHomePageInfoCard = ({ title, value, subtitle, SvgIcon }: UserHomePageI
             <SvgIcon color="secondary" />
           </Stack>
 
-          <Typography variant="h4" color="text.primary">
-            {value}
-          </Typography>
+          {children}
+
           <Typography variant="body2" color="text.disabled">
             {subtitle}
           </Typography>
@@ -32,4 +31,4 @@ const UserHomePageInfoCard = ({ title, value, subtitle, SvgIcon }: UserHomePageI
   );
 };
 
-export default UserHomePageInfoCard;
+export default HomeCard;