diff --git a/.prettierrc b/.prettierrc index 32ebab4..7d88720 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,4 +1,6 @@ { "singleQuote": true, - "trailingComma": "none" + "jsxSingleQuote": true, + "trailingComma": "none", + "printWidth": 120 } diff --git a/app/layout.tsx b/app/layout.tsx index 56d1008..cd8de53 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -4,7 +4,7 @@ export const metadata = { title: 'The Myrtle Tree', description: 'A pitch for a game about sound and reliving memories', icons: { - icon: 'favicon.ico' + icon: 'favicon.svg' } }; @@ -14,7 +14,7 @@ export default function RootLayout({ children: React.ReactNode; }) { return ( - + {children} ); diff --git a/app/page.tsx b/app/page.tsx index 38fcb40..4ef7883 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,11 +1,12 @@ import React from 'react'; -// import Headphones from '@/components/headphones'; -// import Header from '@/components/header'; +import Header from '@/components/header'; +import Footer from '@/components/footer'; export default function Home() { return ( -
-

Testing

+
+
+
); } diff --git a/components/footer.tsx b/components/footer.tsx index 167c031..3bddcd7 100644 --- a/components/footer.tsx +++ b/components/footer.tsx @@ -1,5 +1,11 @@ import React from 'react'; +import Menu from '@/components/menu'; export default function Footer() { - return
; + return ( + + ); } diff --git a/components/header.tsx b/components/header.tsx index ba02c3c..6fbd496 100644 --- a/components/header.tsx +++ b/components/header.tsx @@ -1,48 +1,10 @@ -'use client'; - import React from 'react'; -import Image from 'next/image'; -import DropdownMenu from '@radix-ui/react-dropdown-menu'; -import { useState } from 'react'; - -function Menu() { - const darkMode = useState(true); - const menuItems = ['Source code on GitHub', 'Made by Rory Healy']; - return ( - - - Menu - - - - {menuItems.map((text, i) => ( - - {text} - - ))} - - - - ); -} +import Menu from '@/components/menu'; export default function Header() { return ( -
+
- {/* Menu */}
); } diff --git a/components/headphones.tsx b/components/headphones.tsx index 0d5ca32..2e02b09 100644 --- a/components/headphones.tsx +++ b/components/headphones.tsx @@ -5,8 +5,8 @@ export default function Headphones() { return (
Headphones image diff --git a/components/menu.tsx b/components/menu.tsx new file mode 100644 index 0000000..e292dbc --- /dev/null +++ b/components/menu.tsx @@ -0,0 +1,79 @@ +'use client'; + +import React from 'react'; + +import Image from 'next/image'; +import * as DropdownMenu from '@radix-ui/react-dropdown-menu'; +import { useState } from 'react'; + +enum Mode { + Light, + Dark +} + +interface DisplayMode { + current: Mode, + text: string, + icon: string +} + +const darkDisplayMode: DisplayMode = { + current: Mode.Dark, + text: 'Switch to light mode', + icon: 'images/white/sun.svg' +} + +const lightDisplayMode: DisplayMode = { + current: Mode.Light, + text: 'Switch to dark mode', + icon: 'images/black/moon.svg' +} + +export default function Menu() { + const [displayMode, setDisplayMode] = useState(darkDisplayMode); + + const modeSwitch = () => { + if (displayMode.current === Mode.Dark) { + setDisplayMode(lightDisplayMode); + } else if (displayMode.current === Mode.Light) { + setDisplayMode(darkDisplayMode); + } else { + // Might not be necessary + throw new TypeError('Invalid displayMode set.'); + } + }; + + return ( + + + Menu + + + + + +

{displayMode.text}

+ Sun + + + + +

View source on GitHub

+ GitHub logo + + + + +

Made by Rory Healy

+ + + + + ); +} diff --git a/public/favicon.ico b/public/favicon.ico deleted file mode 100644 index ff544f1..0000000 Binary files a/public/favicon.ico and /dev/null differ diff --git a/public/favicon.svg b/public/favicon.svg new file mode 100644 index 0000000..007c37a --- /dev/null +++ b/public/favicon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/black/github-logo.svg b/public/images/black/github-logo.svg new file mode 100644 index 0000000..e46612c --- /dev/null +++ b/public/images/black/github-logo.svg @@ -0,0 +1,8 @@ + + + diff --git a/public/images/black/headphones.svg b/public/images/black/headphones.svg new file mode 100644 index 0000000..a1ed177 --- /dev/null +++ b/public/images/black/headphones.svg @@ -0,0 +1,225 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/black/menu.svg b/public/images/black/menu.svg new file mode 100644 index 0000000..9109132 --- /dev/null +++ b/public/images/black/menu.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/black/moon.svg b/public/images/black/moon.svg new file mode 100644 index 0000000..1dac2ca --- /dev/null +++ b/public/images/black/moon.svg @@ -0,0 +1,8 @@ + + + diff --git a/public/images/pause.svg b/public/images/black/pause.svg similarity index 100% rename from public/images/pause.svg rename to public/images/black/pause.svg diff --git a/public/images/play.svg b/public/images/black/play.svg similarity index 100% rename from public/images/play.svg rename to public/images/black/play.svg diff --git a/public/images/speaker-loud.svg b/public/images/black/speaker-loud.svg similarity index 100% rename from public/images/speaker-loud.svg rename to public/images/black/speaker-loud.svg diff --git a/public/images/speaker-moderate.svg b/public/images/black/speaker-moderate.svg similarity index 100% rename from public/images/speaker-moderate.svg rename to public/images/black/speaker-moderate.svg diff --git a/public/images/speaker-off.svg b/public/images/black/speaker-off.svg similarity index 100% rename from public/images/speaker-off.svg rename to public/images/black/speaker-off.svg diff --git a/public/images/speaker-quiet.svg b/public/images/black/speaker-quiet.svg similarity index 100% rename from public/images/speaker-quiet.svg rename to public/images/black/speaker-quiet.svg diff --git a/public/images/stop.svg b/public/images/black/stop.svg similarity index 100% rename from public/images/stop.svg rename to public/images/black/stop.svg diff --git a/public/images/track-next.svg b/public/images/black/track-next.svg similarity index 100% rename from public/images/track-next.svg rename to public/images/black/track-next.svg diff --git a/public/images/track-previous.svg b/public/images/black/track-previous.svg similarity index 100% rename from public/images/track-previous.svg rename to public/images/black/track-previous.svg diff --git a/public/images/white/github-logo.svg b/public/images/white/github-logo.svg new file mode 100644 index 0000000..9585531 --- /dev/null +++ b/public/images/white/github-logo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/headphones.svg b/public/images/white/headphones.svg similarity index 98% rename from public/images/headphones.svg rename to public/images/white/headphones.svg index 7a48a34..fc63d21 100644 --- a/public/images/headphones.svg +++ b/public/images/white/headphones.svg @@ -1,9 +1,9 @@ @@ -211,7 +211,7 @@ + + + diff --git a/public/images/white/play.svg b/public/images/white/play.svg new file mode 100644 index 0000000..b6b25d8 --- /dev/null +++ b/public/images/white/play.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/white/speaker-loud.svg b/public/images/white/speaker-loud.svg new file mode 100644 index 0000000..007c37a --- /dev/null +++ b/public/images/white/speaker-loud.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/white/speaker-moderate.svg b/public/images/white/speaker-moderate.svg new file mode 100644 index 0000000..e9559d6 --- /dev/null +++ b/public/images/white/speaker-moderate.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/white/speaker-off.svg b/public/images/white/speaker-off.svg new file mode 100644 index 0000000..7a0655c --- /dev/null +++ b/public/images/white/speaker-off.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/white/speaker-quiet.svg b/public/images/white/speaker-quiet.svg new file mode 100644 index 0000000..be0cffd --- /dev/null +++ b/public/images/white/speaker-quiet.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/white/stop.svg b/public/images/white/stop.svg new file mode 100644 index 0000000..da12e82 --- /dev/null +++ b/public/images/white/stop.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/white/sun.svg b/public/images/white/sun.svg new file mode 100644 index 0000000..d5d4596 --- /dev/null +++ b/public/images/white/sun.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/white/track-next.svg b/public/images/white/track-next.svg new file mode 100644 index 0000000..6e93e1e --- /dev/null +++ b/public/images/white/track-next.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/white/track-previous.svg b/public/images/white/track-previous.svg new file mode 100644 index 0000000..72bf54a --- /dev/null +++ b/public/images/white/track-previous.svg @@ -0,0 +1,4 @@ + + + +