diff --git a/client/public/favicon.ico b/client/public/favicon.ico index a11777c..ead004d 100644 Binary files a/client/public/favicon.ico and b/client/public/favicon.ico differ diff --git a/client/public/index.html b/client/public/index.html index aa069f2..cc1e2c3 100644 --- a/client/public/index.html +++ b/client/public/index.html @@ -5,39 +5,10 @@ - - - - - - React App + Snippet Box
- diff --git a/client/src/components/Navigation/Navbar.tsx b/client/src/components/Navigation/Navbar.tsx new file mode 100644 index 0000000..2ef7d92 --- /dev/null +++ b/client/src/components/Navigation/Navbar.tsx @@ -0,0 +1,23 @@ +import { NavLink } from 'react-router-dom'; +import { Route } from '../../typescript/interfaces'; +import { routes as clientRoutes } from './routes.json'; + +export const Navbar = (): JSX.Element => { + const routes = clientRoutes as Route[]; + + return ( + + ); +}; diff --git a/client/src/components/Navigation/routes.json b/client/src/components/Navigation/routes.json new file mode 100644 index 0000000..534635f --- /dev/null +++ b/client/src/components/Navigation/routes.json @@ -0,0 +1,12 @@ +{ + "routes": [ + { + "name": "Home", + "dest": "/" + }, + { + "name": "Snippets", + "dest": "/snippets" + } + ] +} diff --git a/client/src/components/UI/Badge.tsx b/client/src/components/UI/Badge.tsx index a4f92fc..fda4657 100644 --- a/client/src/components/UI/Badge.tsx +++ b/client/src/components/UI/Badge.tsx @@ -1,14 +1,12 @@ -import { ReactJs } from '@icons-pack/react-simple-icons'; +import { Color } from '../../typescript/types'; -interface Props {} +interface Props { + text: string; + color: Color; +} export const Badge = (props: Props): JSX.Element => { - const Icon = require('@icons-pack/react-simple-icons/lib/components/Youtube'); + const { text, color } = props; - return ( - - - New - - ); + return {text}; }; diff --git a/client/src/components/UI/Button.tsx b/client/src/components/UI/Button.tsx index 238dac8..8462bf1 100644 --- a/client/src/components/UI/Button.tsx +++ b/client/src/components/UI/Button.tsx @@ -6,19 +6,28 @@ interface Props { outline?: boolean; small?: boolean; handler?: () => void; + classes?: string; } export const Button = (props: Props): JSX.Element => { - const { text, color, outline = false, small = false, handler } = props; + const { + text, + color, + outline = false, + small = false, + handler, + classes = '' + } = props; - const classes = [ + const elClasses = [ 'btn', outline ? `btn-outline-${color}` : `btn-${color}`, - small && 'btn-sm' + small && 'btn-sm', + classes ]; return ( - ); diff --git a/client/src/components/UI/PageHeader.tsx b/client/src/components/UI/PageHeader.tsx new file mode 100644 index 0000000..cd728e5 --- /dev/null +++ b/client/src/components/UI/PageHeader.tsx @@ -0,0 +1,23 @@ +import { Link } from 'react-router-dom'; + +interface Props { + title: string; + prevDest?: string; +} + +export const PageHeader = (props: Props): JSX.Element => { + const { title, prevDest } = props; + + return ( +
+

{title}

+ {prevDest && ( +
+ + <- Go back + +
+ )} +
+ ); +}; diff --git a/client/src/components/UI/Spinner.module.css b/client/src/components/UI/Spinner.module.css index 444025a..6b72b3f 100644 --- a/client/src/components/UI/Spinner.module.css +++ b/client/src/components/UI/Spinner.module.css @@ -1,14 +1,14 @@ .Spinner, .Spinner:before, .Spinner:after { - background: #3459e6; + background: #212529; -webkit-animation: load1 1s infinite ease-in-out; animation: load1 1s infinite ease-in-out; width: 1em; height: 4em; } .Spinner { - color: #3459e6; + color: #212529; text-indent: -9999em; margin: 88px auto; position: relative; diff --git a/client/src/typescript/types/Colors.ts b/client/src/typescript/types/Colors.ts index 6f3b439..4476060 100644 --- a/client/src/typescript/types/Colors.ts +++ b/client/src/typescript/types/Colors.ts @@ -1,9 +1,12 @@ -export type Color = - | 'primary' - | 'secondary' - | 'success' - | 'info' - | 'warning' - | 'danger' - | 'light' - | 'dark'; +export const colors = [ + 'primary', + 'secondary', + 'success', + 'info', + 'warning', + 'danger', + 'light', + 'dark' +] as const; + +export type Color = typeof colors[number];