From 8b4cbd8c3ba7bf468f25bccb8e3ce24c3a621b85 Mon Sep 17 00:00:00 2001 From: Web Spinner Bot Date: Tue, 19 Dec 2023 07:05:53 +0000 Subject: [PATCH] Create page: Home --- src/app/notes/page.tsx | 47 +++++++++++++++++++++++++++++++++ src/components/Button.tsx | 7 +++++ src/components/Card.tsx | 21 +++++++++++++++ src/components/Input.tsx | 7 +++++ src/components/Label.tsx | 7 +++++ src/components/NoteCard.tsx | 20 ++++++++++++++ src/components/NoteList.tsx | 26 ++++++++++++++++++ src/components/NoteModal.tsx | 48 +++++++++++++++++++++++++++++++++ src/components/Sidebar.tsx | 51 ++++++++++++++++++++++++++++++++++++ 9 files changed, 234 insertions(+) create mode 100644 src/app/notes/page.tsx create mode 100644 src/components/Button.tsx create mode 100644 src/components/Card.tsx create mode 100644 src/components/Input.tsx create mode 100644 src/components/Label.tsx create mode 100644 src/components/NoteCard.tsx create mode 100644 src/components/NoteList.tsx create mode 100644 src/components/NoteModal.tsx create mode 100644 src/components/Sidebar.tsx diff --git a/src/app/notes/page.tsx b/src/app/notes/page.tsx new file mode 100644 index 0000000..c9c1e21 --- /dev/null +++ b/src/app/notes/page.tsx @@ -0,0 +1,47 @@ +"use client"; + +import { FunctionComponent, useState } from 'react'; +import Sidebar from '@/components/Sidebar'; +import NoteList from '@/components/NoteList'; +import NoteModal from '@/components/NoteModal'; +import { Button } from '@/components/Button'; + +interface NotePageProps {} + +const notesInitial = [ + { title: 'Magnetism', date: '12/10/23' }, + { title: 'Electricity', date: '11/20/23' } +]; + +const NotePage: FunctionComponent = () => { + const [notes, setNotes] = useState(notesInitial); + const [isModalOpen, setIsModalOpen] = useState(false); + + const handleNewNote = (title: string, content: string) => { + // This example does not handle the content, only the title and date is used + const newNote = { title, date: new Date().toLocaleDateString('en-US') }; + setNotes([...notes, newNote]); + }; + + return ( +
+ +
+
+

Notes

+ +
+ +
+ setIsModalOpen(false)} + onSave={handleNewNote} + /> +
+ ); +}; + +export default NotePage; diff --git a/src/components/Button.tsx b/src/components/Button.tsx new file mode 100644 index 0000000..9f65283 --- /dev/null +++ b/src/components/Button.tsx @@ -0,0 +1,7 @@ +"use client"; + +import { Button as UIButton } from '@/components/ui/button'; + +// This component is just re-exporting the existing Button from UI library +// to make it easier to import in our Note application. +export { UIButton as Button }; diff --git a/src/components/Card.tsx b/src/components/Card.tsx new file mode 100644 index 0000000..f904544 --- /dev/null +++ b/src/components/Card.tsx @@ -0,0 +1,21 @@ +"use client"; + +import { + Card as UICard, + CardHeader as UICardHeader, + CardFooter as UICardFooter, + CardTitle as UICardTitle, + CardDescription as UICardDescription, + CardContent as UICardContent +} from '@/components/ui/card'; + +// These components are just re-exporting the existing Card components from UI library +// to make it easier to import in our Note application. +export { + UICard as Card, + UICardHeader as CardHeader, + UICardFooter as CardFooter, + UICardTitle as CardTitle, + UICardDescription as CardDescription, + UICardContent as CardContent +}; diff --git a/src/components/Input.tsx b/src/components/Input.tsx new file mode 100644 index 0000000..35378fa --- /dev/null +++ b/src/components/Input.tsx @@ -0,0 +1,7 @@ +"use client"; + +import { Input as UIInput } from '@/components/ui/input'; + +// This component is just re-exporting the existing Input from UI library +// to make it easier to import in our Note application. +export { UIInput as Input }; diff --git a/src/components/Label.tsx b/src/components/Label.tsx new file mode 100644 index 0000000..b6c67b9 --- /dev/null +++ b/src/components/Label.tsx @@ -0,0 +1,7 @@ +"use client"; + +import { Label as UILabel } from '@/components/ui/label'; + +// This component is just re-exporting the existing Label from UI library +// to make it easier to import in our Note application. +export { UILabel as Label }; diff --git a/src/components/NoteCard.tsx b/src/components/NoteCard.tsx new file mode 100644 index 0000000..91ed7af --- /dev/null +++ b/src/components/NoteCard.tsx @@ -0,0 +1,20 @@ +"use client"; + +import { FunctionComponent } from 'react'; + +interface NoteCardProps { + title: string; + date: string; + onClick?: () => void; +} + +const NoteCard: FunctionComponent = ({ title, date, onClick }) => { + return ( +
+
{title}
+
{date}
+
+ ); +}; + +export default NoteCard; diff --git a/src/components/NoteList.tsx b/src/components/NoteList.tsx new file mode 100644 index 0000000..8a1688c --- /dev/null +++ b/src/components/NoteList.tsx @@ -0,0 +1,26 @@ +"use client"; + +import { FunctionComponent } from 'react'; +import NoteCard from '@/components/NoteCard'; + +interface NoteListProps { + notes: Array<{ title: string; date: string; }>; // Define a type for note objects + onNoteClick?: (note: { title: string; date: string; }) => void; +} + +const NoteList: FunctionComponent = ({ notes, onNoteClick }) => { + return ( +
+ {notes.map((note, index) => ( + onNoteClick && onNoteClick(note)} + /> + ))} +
+ ); +}; + +export default NoteList; diff --git a/src/components/NoteModal.tsx b/src/components/NoteModal.tsx new file mode 100644 index 0000000..2f5fdbb --- /dev/null +++ b/src/components/NoteModal.tsx @@ -0,0 +1,48 @@ +"use client"; + +import { FunctionComponent, useState } from 'react'; +import { Button } from '@/components/ui/button'; +import { Input } from '@/components/ui/input'; +import { Label } from '@/components/ui/label'; + +interface NoteModalProps { + isOpen: boolean; + onClose: () => void; + onSave: (title: string, content: string) => void; +} + +const NoteModal: FunctionComponent = ({ isOpen, onClose, onSave }) => { + const [title, setTitle] = useState(''); + const [content, setContent] = useState(''); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + onSave(title, content); + setTitle(''); + setContent(''); + onClose(); + }; + + return ( +
+
+ × +
+
+ + setTitle(e.target.value)} required /> +
+
+ + +
+
+ +
+
+
+
+ ); +}; + +export default NoteModal; diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx new file mode 100644 index 0000000..60d8187 --- /dev/null +++ b/src/components/Sidebar.tsx @@ -0,0 +1,51 @@ +"use client"; + +import { FunctionComponent } from 'react'; +import Link from 'next/link'; + +interface SidebarProps {} + +const Sidebar: FunctionComponent = () => { + return ( + + ); +}; + +export default Sidebar;