From ba3331efe8f51cb1a0029e20bbfd7060312b810e Mon Sep 17 00:00:00 2001 From: Mo Tarbin Date: Sat, 13 Jul 2024 01:54:23 -0400 Subject: Add Footer component to Landing page --- src/views/ChoreEdit/ChoreView.jsx | 106 +++++++++++++++++++++------- src/views/Landing/FeaturesSection.jsx | 27 +++----- src/views/Landing/Footer.jsx | 127 ++++++++++++++++++++++++++++++++++ src/views/Landing/Landing.jsx | 14 +++- src/views/components/NavBar.jsx | 10 ++- 5 files changed, 239 insertions(+), 45 deletions(-) create mode 100644 src/views/Landing/Footer.jsx (limited to 'src/views') diff --git a/src/views/ChoreEdit/ChoreView.jsx b/src/views/ChoreEdit/ChoreView.jsx index df45aa7..9e3357b 100644 --- a/src/views/ChoreEdit/ChoreView.jsx +++ b/src/views/ChoreEdit/ChoreView.jsx @@ -3,15 +3,19 @@ import { CancelScheduleSend, Check, Checklist, + Edit, + History, Note, PeopleAlt, Person, + Timelapse, } from '@mui/icons-material' import { Box, Button, Card, Checkbox, + Chip, Container, FormControl, Grid, @@ -84,21 +88,24 @@ const ChoreView = () => { const generateInfoCards = chore => { const cards = [ + // { + // size: 6, + // icon: , + // text: 'Due Date', + // subtext: moment(chore.nextDueDate).format('MM/DD/YYYY hh:mm A'), + // }, { - icon: , - text: 'Due Date', - subtext: moment(chore.nextDueDate).format('MM/DD/YYYY hh:mm A'), - }, - { + size: 6, icon: , text: 'Assigned To', subtext: performers.find(p => p.id === chore.assignedTo)?.displayName, }, - { - icon: , - text: 'Created By', - subtext: performers.find(p => p.id === chore.createdBy)?.displayName, - }, + // { + // size: 6, + // icon: , + // text: 'Created By', + // subtext: performers.find(p => p.id === chore.createdBy)?.displayName, + // }, // { // icon: , // text: 'Frequency', @@ -107,20 +114,23 @@ const ChoreView = () => { // chore.frequencyType.slice(1), // }, { + size: 6, icon: , - text: 'Total Completed', - subtext: `${chore.totalCompletedCount}`, + text: 'Completed', + subtext: `${chore.totalCompletedCount} times`, }, - // { - // icon: , - // text: 'Last Completed', - // subtext: - // chore.lastCompletedDate && - // moment(chore.lastCompletedDate).format('MM/DD/YYYY hh:mm A'), - // }, { + size: 6, + icon: , + text: 'Last time', + subtext: + chore.lastCompletedDate && + moment(chore.lastCompletedDate).format('MM/DD/YYYY hh:mm A'), + }, + { + size: 6, icon: , - text: 'Last Completed', + text: 'Last', subtext: chore.lastCompletedDate ? `${ chore.lastCompletedDate && @@ -132,6 +142,7 @@ const ChoreView = () => { : 'Never', }, { + size: 12, icon: , text: 'Recent Note', subtext: chore.notes || '--', @@ -195,22 +206,43 @@ const ChoreView = () => { justifyContent: 'space-between', }} > - + {chore.name} - + } size='lg' sx={{ mb: 4 }}> + {chore.nextDueDate + ? `Due at ${moment(chore.nextDueDate).format('MM/DD/YYYY hh:mm A')}` + : 'N/A'} + + + {infoCards.map((info, index) => ( - - + + {info.icon} @@ -227,6 +259,28 @@ const ChoreView = () => { ))} + + + + + + {/* @@ -106,7 +101,7 @@ function FeaturesSection() { - Features Overview + Why Donetick? diff --git a/src/views/Landing/Footer.jsx b/src/views/Landing/Footer.jsx new file mode 100644 index 0000000..11a011a --- /dev/null +++ b/src/views/Landing/Footer.jsx @@ -0,0 +1,127 @@ +import LogoSVG from '@/assets/logo.svg' +import { Card, Grid } from '@mui/joy' +import Box from '@mui/joy/Box' +import Link from '@mui/joy/Link' +import Typography from '@mui/joy/Typography' +import * as React from 'react' + +function Footer() { + return ( + + + +
+ logo +
+ + + Done + + tick✓ + + + + Beta + + +
+ + + Github + + + Core(Backend) + + + Frontend + + + Home Assistant Addon + + + Packages + + + + + Links + + + + Roadmap(soon) + + + Documentation(soon) + + + Changelog(soon) + + + {/* + + Others + + + Telegram Integration + + + Slash Commands + + */} +
+
+ ) +} + +export default Footer diff --git a/src/views/Landing/Landing.jsx b/src/views/Landing/Landing.jsx index a8b650d..4ca1b60 100644 --- a/src/views/Landing/Landing.jsx +++ b/src/views/Landing/Landing.jsx @@ -1,4 +1,4 @@ -import { Container, Grid } from '@mui/joy' +import { Box, Container, Grid } from '@mui/joy' import AOS from 'aos' import 'aos/dist/aos.css' import { useEffect } from 'react' @@ -8,6 +8,7 @@ import DemoHistory from './DemoHistory' import DemoMyChore from './DemoMyChore' import DemoScheduler from './DemoScheduler' import FeaturesSection from './FeaturesSection' +import Footer from './Footer' import HomeHero from './HomeHero' const Landing = () => { const Navigate = useNavigate() @@ -39,6 +40,17 @@ const Landing = () => { {/* */} + + +