diff --git a/client/package-lock.json b/client/package-lock.json index 7ebeecf..a118849 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.4.3", "sass": "^1.56.1" }, "devDependencies": { @@ -514,6 +515,14 @@ "@jridgewell/sourcemap-codec": "1.4.14" } }, + "node_modules/@remix-run/router": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.3.tgz", + "integrity": "sha512-ceuyTSs7PZ/tQqi19YZNBc5X7kj1f8p+4DIyrcIYFY9h+hd1OKm4RqtiWldR9eGEvIiJfsqwM4BsuCtRIuEw6Q==", + "engines": { + "node": ">=14" + } + }, "node_modules/@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", @@ -1417,6 +1426,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.4.3", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.3.tgz", + "integrity": "sha512-BT6DoGn6aV1FVP5yfODMOiieakp3z46P1Fk0RNzJMACzE7C339sFuHebfvWtnB4pzBvXXkHP2vscJzWRuUjTtA==", + "dependencies": { + "@remix-run/router": "1.0.3" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.4.3", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.3.tgz", + "integrity": "sha512-MiaYQU8CwVCaOfJdYvt84KQNjT78VF0TJrA17SIQgNHRvLnXDJO6qsFqq8F/zzB1BWZjCFIrQpu4QxcshitziQ==", + "dependencies": { + "@remix-run/router": "1.0.3", + "react-router": "6.4.3" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/readdirp": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", @@ -1995,6 +2034,11 @@ "@jridgewell/sourcemap-codec": "1.4.14" } }, + "@remix-run/router": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.3.tgz", + "integrity": "sha512-ceuyTSs7PZ/tQqi19YZNBc5X7kj1f8p+4DIyrcIYFY9h+hd1OKm4RqtiWldR9eGEvIiJfsqwM4BsuCtRIuEw6Q==" + }, "@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", @@ -2544,6 +2588,23 @@ "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==", "dev": true }, + "react-router": { + "version": "6.4.3", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.3.tgz", + "integrity": "sha512-BT6DoGn6aV1FVP5yfODMOiieakp3z46P1Fk0RNzJMACzE7C339sFuHebfvWtnB4pzBvXXkHP2vscJzWRuUjTtA==", + "requires": { + "@remix-run/router": "1.0.3" + } + }, + "react-router-dom": { + "version": "6.4.3", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.3.tgz", + "integrity": "sha512-MiaYQU8CwVCaOfJdYvt84KQNjT78VF0TJrA17SIQgNHRvLnXDJO6qsFqq8F/zzB1BWZjCFIrQpu4QxcshitziQ==", + "requires": { + "@remix-run/router": "1.0.3", + "react-router": "6.4.3" + } + }, "readdirp": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", diff --git a/client/package.json b/client/package.json index 2c5e1e1..223d2d1 100644 --- a/client/package.json +++ b/client/package.json @@ -11,6 +11,7 @@ "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.4.3", "sass": "^1.56.1" }, "devDependencies": { diff --git a/client/src/App.tsx b/client/src/App.tsx index 02a56c5..aab1351 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -1,26 +1,17 @@ -import { Page, Panel } from './components/ui'; +import { BrowserRouter, Routes, Route } from 'react-router-dom'; +import Welcome from './components/pages/Welcome'; import './sass/App.scss' function App() { return ( - - -

RECIPE MANAGER

-

Simple Recipe Management and Sharing for the Home

-

Keep all your most-used recipes handy in your own personal collection.

- - - -

Share Your Recipe Collection

-

Share your personal collection with your friends and family, and subscribe to their collections.

- - - -

Build Shopping Lists Directly from Your Recipes

-

Lay out your meal plan for the week, and let Recipin automatically generate your grocery list, ingredient by ingredient.

- - + +
+ + } /> + +
+ ) } diff --git a/client/src/components/pages/Welcome.tsx b/client/src/components/pages/Welcome.tsx index e69de29..4e8b17c 100644 --- a/client/src/components/pages/Welcome.tsx +++ b/client/src/components/pages/Welcome.tsx @@ -0,0 +1,43 @@ +import { useState } from "react"; +import { useNavigate } from "react-router-dom"; +import { Button, Page, Panel } from "../ui" + +const Welcome = () => { + const [authorized, setAuthorized] = useState(false); + const navigate = useNavigate(); + + const authUserActions = ( + + + + + + ) + + const callToRegister = ( + +

Ready to get started?

+ + + ) + + return ( + + +

Welcome to Recipin

+ + + +

Simple Recipe Management and Sharing for the Home

+ + + +

Build Shopping Lists Directly from Your Recipes

+ + + { authorized ? authUserActions : callToRegister } + + ) +} + +export default Welcome; \ No newline at end of file diff --git a/client/src/components/ui/Button.tsx b/client/src/components/ui/Button.tsx index e69de29..f73c90c 100644 --- a/client/src/components/ui/Button.tsx +++ b/client/src/components/ui/Button.tsx @@ -0,0 +1,12 @@ +import { ButtonComponent } from "../../util/types" +import "/src/sass/components/Button.scss"; + +const Button: ButtonComponent = ({ onClick = (() => {}), children, extraStyles }) => { + return ( + + ) +} + +export default Button; \ No newline at end of file diff --git a/client/src/components/ui/Navbar.tsx b/client/src/components/ui/Navbar.tsx index e69de29..7660b3f 100644 --- a/client/src/components/ui/Navbar.tsx +++ b/client/src/components/ui/Navbar.tsx @@ -0,0 +1,49 @@ +import { useState } from "react"; +import "/src/sass/components/Navbar.scss"; + +const Navbar = () => { + // state will be evaluated here to determine which navbar + // variant will be displayed + + // this will come from state (session?) + const [user, setUser] = useState('Mikayla'); + + const navbarLoggedIn = ( + + ) + + const navbarNotLoggedIn = ( + + ) + + const navbarRegistering = ( + + ) + + return navbarLoggedIn; +} + +export default Navbar; \ No newline at end of file diff --git a/client/src/components/ui/Page.tsx b/client/src/components/ui/Page.tsx index 6be1db1..91aa536 100644 --- a/client/src/components/ui/Page.tsx +++ b/client/src/components/ui/Page.tsx @@ -1,9 +1,14 @@ import { PageComponent } from "../../util/types" +import Navbar from "./Navbar"; +import "/src/sass/components/Page.scss"; const Page: PageComponent = ({ extraStyles, children }) => { return ( -
- { children || null } +
+ +
+ { children || null } +
) } diff --git a/client/src/components/ui/Panel.tsx b/client/src/components/ui/Panel.tsx index bdd68c1..d2aa57c 100644 --- a/client/src/components/ui/Panel.tsx +++ b/client/src/components/ui/Panel.tsx @@ -1,8 +1,9 @@ import { PanelComponent } from "../../util/types"; +import "/src/sass/components/Panel.scss"; const Panel: PanelComponent = ({ children, extraStyles }) => { return ( -
+
{ children || null }
) diff --git a/client/src/components/ui/index.ts b/client/src/components/ui/index.ts index 7ffcf53..4c5ca96 100644 --- a/client/src/components/ui/index.ts +++ b/client/src/components/ui/index.ts @@ -1,7 +1,9 @@ +import Button from "./Button"; import Page from "./Page"; import Panel from "./Panel"; export { + Button, Page, Panel } \ No newline at end of file diff --git a/client/src/sass/App.scss b/client/src/sass/App.scss index 902778b..d038364 100644 --- a/client/src/sass/App.scss +++ b/client/src/sass/App.scss @@ -1,6 +1,9 @@ +@import "./helpers/variables"; + #root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; + display: flex; + height: 100vh; + flex-direction: column; text-align: center; + background-color: $richblack; } diff --git a/client/src/sass/components/Button.scss b/client/src/sass/components/Button.scss new file mode 100644 index 0000000..37f89cb --- /dev/null +++ b/client/src/sass/components/Button.scss @@ -0,0 +1,20 @@ +@import "../helpers/variables"; +@import "../helpers/placeholders"; + +.ui-button { + background-color: $desertrose; + height: 1.75rem; + padding: 0 1rem; + + border: transparent; + border-radius: 6px; + + text-transform: uppercase; + + &:hover { + background-color: $richblack; + transition: background-color 75ms ease; + } + + @extend %variations; +} \ No newline at end of file diff --git a/client/src/sass/components/Navbar.scss b/client/src/sass/components/Navbar.scss new file mode 100644 index 0000000..2fa1593 --- /dev/null +++ b/client/src/sass/components/Navbar.scss @@ -0,0 +1,25 @@ +@import "../helpers/variables"; + +#navbar { + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + height: 4rem; + + width: 100%; + position: fixed; + top: 0; + background-color: $richblack; + color: $papyrus; + + .navbar-block { + display: inline-flex; + flex-direction: row nowrap; + align-items: center; + margin: 0 1rem; + + > * { + margin: 0 12px; + } + } +} \ No newline at end of file diff --git a/client/src/sass/components/Page.scss b/client/src/sass/components/Page.scss new file mode 100644 index 0000000..2885e22 --- /dev/null +++ b/client/src/sass/components/Page.scss @@ -0,0 +1,18 @@ +@import "../helpers/variables"; +@import "../helpers/placeholders"; + +.Page { + display: flex; + flex-direction: column; + align-items: center; + position: relative; + top: 4rem; + + width: calc(100% - 2rem); + height: 100%; + margin: 1rem; + background-color: $rustred; + color: $papyrus; + + @extend %variations; +} \ No newline at end of file diff --git a/client/src/sass/components/Panel.scss b/client/src/sass/components/Panel.scss new file mode 100644 index 0000000..e217053 --- /dev/null +++ b/client/src/sass/components/Panel.scss @@ -0,0 +1,22 @@ +@import "../helpers/variables"; +@import "../helpers/placeholders"; + +.Panel { + background-color: $papyrus; + color: black; + margin: 1rem 0; + padding: 12px; + width: 60%; + border-radius: 16px; + + h1 { + font-size: 2.5rem; + letter-spacing: 4px; + } + + h2 { + font-size: 1.2rem; + } + + @extend %variations; +} \ No newline at end of file diff --git a/client/src/sass/helpers/_placeholders.scss b/client/src/sass/helpers/_placeholders.scss index e69de29..a432780 100644 --- a/client/src/sass/helpers/_placeholders.scss +++ b/client/src/sass/helpers/_placeholders.scss @@ -0,0 +1,15 @@ +@import "./variables"; + +%variations { + &.inherit-background { + background-color: inherit; + } + + &.c-papyrus { + color: $papyrus; + } + + &.uppercase { + text-transform: uppercase; + } +} \ No newline at end of file diff --git a/client/src/sass/helpers/_variables.scss b/client/src/sass/helpers/_variables.scss index e69de29..e58a067 100644 --- a/client/src/sass/helpers/_variables.scss +++ b/client/src/sass/helpers/_variables.scss @@ -0,0 +1,6 @@ +$rustred: #803413; +$desertrose: #77567A; +$richblack: #0A100D; +$warningred: #BE430E; +$lightpink: #CC99D0; +$papyrus: #D6D5C9; \ No newline at end of file diff --git a/client/src/util/types.ts b/client/src/util/types.ts index e3b6be3..0d9bb38 100644 --- a/client/src/util/types.ts +++ b/client/src/util/types.ts @@ -5,5 +5,10 @@ interface PortalBase { extraStyles?: string } +interface ButtonParams extends PortalBase { + onClick?: (params?: any) => any +} + export type PageComponent = FC -export type PanelComponent = FC \ No newline at end of file +export type PanelComponent = FC +export type ButtonComponent = FC \ No newline at end of file