feat: added deadline to studio and centered coming soon

WatchItDev · Dec 3, 2024 · 1f239c3 · 1f239c3
1 parent 6470986
commit 1f239c3
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 18 deletions.
diff --git a/src/pages/dashboard/studio.tsx b/src/pages/dashboard/studio.tsx
@@ -209,7 +209,7 @@ export default function OverviewFilePage() {
       </Helmet>
 
       <BlankView>
-        <ComingSoonView />
+        <ComingSoonView deadline={'03/30/2025 21:30'} showDeadline={true} />
       </BlankView>
 
       {/*<Header>*/}

diff --git a/src/sections/coming-soon/view.tsx b/src/sections/coming-soon/view.tsx
@@ -1,48 +1,55 @@
 // @mui
 import Box from '@mui/material/Box';
-// import Stack from '@mui/material/Stack';
+import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 // hooks
-// import { useCountdownDate } from '@src/hooks/use-countdown';
+import { useCountdownDate } from '@src/hooks/use-countdown';
 // assets
 import { ComingSoonIllustration } from '@src/assets/illustrations';
 import HeaderContent from "@src/layouts/dashboard/HeaderContent.tsx";
 import Header from "@src/layouts/dashboard/header.tsx";
 
 // ----------------------------------------------------------------------
 
-export default function ComingSoonView() {
-  // const { days, hours, minutes, seconds } = useCountdownDate(new Date('12/03/2024 21:30'));
+interface props {
+  deadline?: string
+  showDeadline?: boolean
+}
+
+export const ComingSoonView = ({ deadline = '01/12/2025 21:30', showDeadline }: props) => {
+  const { days, hours, minutes, seconds } = useCountdownDate(new Date(deadline));
 
   return (
     <>
       <Header>
         <HeaderContent title="Coming soon" />
       </Header>
-      <Typography variant="h3" sx={{ mb: 2 }}>
+      <Typography variant="h3" sx={{ mb: 2, mt: 3, width: '100%', textAlign: 'center' }}>
         Coming Soon!
       </Typography>
 
-      <Typography sx={{ color: 'text.secondary' }}>
+      <Typography variant={'h6'} sx={{ color: 'text.secondary', width: '100%', textAlign: 'center', mb: 1 }}>
         We are currently working hard on this page!
       </Typography>
 
       <ComingSoonIllustration sx={{ my: 10, height: 240 }} />
 
-      {/*<Stack
-        direction="row"
-        justifyContent="center"
-        divider={<Box sx={{ mx: { xs: 1, sm: 2.5 } }}>:</Box>}
-        sx={{ typography: 'h2' }}
-      >
-        <TimeBlock label="Days" value={days} />
+      {showDeadline && (
+        <Stack
+          direction="row"
+          justifyContent="center"
+          divider={<Box sx={{ mx: { xs: 1, sm: 2.5 } }}>:</Box>}
+          sx={{ typography: 'h2', mb: 4 }}
+        >
+          <TimeBlock label="Days" value={days} />
 
-        <TimeBlock label="Hours" value={hours} />
+          <TimeBlock label="Hours" value={hours} />
 
-        <TimeBlock label="Minutes" value={minutes} />
+          <TimeBlock label="Minutes" value={minutes} />
 
-        <TimeBlock label="Seconds" value={seconds} />
-      </Stack>*/}
+          <TimeBlock label="Seconds" value={seconds} />
+        </Stack>
+      )}
     </>
   );
 }
@@ -62,3 +69,5 @@ function TimeBlock({ label, value }: TimeBlockProps) {
     </div>
   );
 }
+
+export default ComingSoonView;