diff --git a/src/app/(editor)/layout.tsx b/src/app/(editor)/layout.tsx new file mode 100644 index 0000000..c63ac70 --- /dev/null +++ b/src/app/(editor)/layout.tsx @@ -0,0 +1,14 @@ +import Header from "@/components/Header"; + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return ( + <> +
+ {children} + + ); +} diff --git a/src/app/(editor)/page.tsx b/src/app/(editor)/page.tsx new file mode 100644 index 0000000..2431a93 --- /dev/null +++ b/src/app/(editor)/page.tsx @@ -0,0 +1,22 @@ +"use client"; + +import { Plus } from "lucide-react"; +import { ChangeEvent } from "react"; +import LineInputGroup from "@/components/LineInputGroup"; +import IconButton from "@/components/ui/IconButton"; + +export default function Home() { + const saveChanges = (e: ChangeEvent) => { + + }; + + return ( +
+
+ + + } /> +
+
+ ); +} diff --git a/src/app/(noneditor)/about/page.tsx b/src/app/(noneditor)/about/page.tsx new file mode 100644 index 0000000..5da116f --- /dev/null +++ b/src/app/(noneditor)/about/page.tsx @@ -0,0 +1,15 @@ +import { Metadata } from "next"; + +export const metadata: Metadata = { + title: "Rhyme – About", + description: "Information about the Rhyme and its creators", +}; + +export default function About() { + return ( + <> +

About Page

+ TODO + + ); +} diff --git a/src/app/(noneditor)/layout.tsx b/src/app/(noneditor)/layout.tsx new file mode 100644 index 0000000..311c52a --- /dev/null +++ b/src/app/(noneditor)/layout.tsx @@ -0,0 +1,16 @@ +import Header from "@/components/Header"; + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return ( + <> +
+
+ {children} +
+ + ); +} diff --git a/src/app/(noneditor)/login/page.tsx b/src/app/(noneditor)/login/page.tsx new file mode 100644 index 0000000..d939f02 --- /dev/null +++ b/src/app/(noneditor)/login/page.tsx @@ -0,0 +1,15 @@ +import { Metadata } from "next"; + +export const metadata: Metadata = { + title: "Rhyme – Log In", + description: "Log into Rhyme account to save, show and load notes", +}; + +export default function About() { + return ( + <> +

Login Page

+ TODO + + ); +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 14290a3..0bbeae9 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,6 +1,5 @@ -import type { Metadata } from "next"; +import { Metadata } from "next"; import { Noto_Sans_Mono } from "next/font/google"; -import Header from "@/components/Header"; import "./globals.css"; const notoSansMono = Noto_Sans_Mono({ @@ -21,7 +20,6 @@ export default function RootLayout({ return ( -
{children} diff --git a/src/app/page.tsx b/src/app/page.tsx deleted file mode 100644 index 0eb8abb..0000000 --- a/src/app/page.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import Lyrics from "@/components/Lyrics"; - -export default function Home() { - return ( -
- -
- ); -} diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 9e0b6e6..61d8702 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,16 +1,29 @@ import Link from "next/link"; -import { Plus, UserRound } from "lucide-react"; -import HeaderButton from "./HeaderButton"; +import { ArrowRightFromLine, CircleQuestionMark, List, Plus, UserRound } from "lucide-react"; +import HeaderButton from "./ui/HeaderButton"; -export default function Header() { +export default function Header({ showToolbar = true }: { showToolbar?: boolean }) { return (
- - RHYME + + - } /> -
- } /> + + {showToolbar && ( +
+ } /> + } /> + } /> +
+ )} + +
+ + } /> + + + } /> +
); diff --git a/src/components/HeaderButton.tsx b/src/components/HeaderButton.tsx deleted file mode 100644 index 05dd202..0000000 --- a/src/components/HeaderButton.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { ReactNode } from "react"; - -export default function HeaderButton({ title, icon }: { title: string, icon?: ReactNode }) { - return ( - - ); -} diff --git a/src/components/LineInputGroup.tsx b/src/components/LineInputGroup.tsx new file mode 100644 index 0000000..a25a2fb --- /dev/null +++ b/src/components/LineInputGroup.tsx @@ -0,0 +1,25 @@ +import { LockOpen, X } from "lucide-react"; +import LineInput from "./ui/LineInput"; +import IconButton from "./ui/IconButton"; +import { ChangeEvent } from "react"; + +export default function LineInputGroup({ + size = 4, + onChange, +}: { + size: number; + onChange: (e: ChangeEvent) => void; +}) { + return ( +
+
+ + {[...Array(size)].map((_, i) => )} +
+
+ } /> + } /> +
+
+ ); +} diff --git a/src/components/Lyrics.tsx b/src/components/Lyrics.tsx deleted file mode 100644 index 9295474..0000000 --- a/src/components/Lyrics.tsx +++ /dev/null @@ -1,17 +0,0 @@ -"use client"; - -import { ChangeEvent } from "react"; -import Input from "./Input"; - -export default function Lyrics() { - const onChange = (e: ChangeEvent) => { - // TODO - } - - return ( -
-

Song #1

- {[...Array(4)].map((_, i) => )} -
- ); -} diff --git a/src/components/ui/HeaderButton.tsx b/src/components/ui/HeaderButton.tsx new file mode 100644 index 0000000..59c6d83 --- /dev/null +++ b/src/components/ui/HeaderButton.tsx @@ -0,0 +1,10 @@ +import { ReactNode } from "react"; + +export default function HeaderButton({ title, icon, className }: { title: string, icon?: ReactNode, className?: string }) { + return ( + + ); +} diff --git a/src/components/ui/IconButton.tsx b/src/components/ui/IconButton.tsx new file mode 100644 index 0000000..dabb1c3 --- /dev/null +++ b/src/components/ui/IconButton.tsx @@ -0,0 +1,9 @@ +import { ReactNode } from "react"; + +export default function IconButton({ icon }: { icon: ReactNode }) { + return ( + + ); +} diff --git a/src/components/Input.tsx b/src/components/ui/LineInput.tsx similarity index 75% rename from src/components/Input.tsx rename to src/components/ui/LineInput.tsx index e4d6c1e..f3e0dd7 100644 --- a/src/components/Input.tsx +++ b/src/components/ui/LineInput.tsx @@ -1,6 +1,6 @@ import { InputHTMLAttributes } from "react"; -export default function Input(props: InputHTMLAttributes) { +export default function LineInput(props: InputHTMLAttributes) { return ( );