From 952ebb5d3a5ebfe5d31981210ea4c67a0aa069e6 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 21 Sep 2021 15:47:46 +0200 Subject: [PATCH] Favicon. Various UI components --- client/public/favicon.ico | Bin 3870 -> 1150 bytes client/public/index.html | 31 +------------------ client/src/components/Navigation/Navbar.tsx | 23 ++++++++++++++ client/src/components/Navigation/routes.json | 12 +++++++ client/src/components/UI/Badge.tsx | 16 +++++----- client/src/components/UI/Button.tsx | 17 +++++++--- client/src/components/UI/PageHeader.tsx | 23 ++++++++++++++ client/src/components/UI/Spinner.module.css | 4 +-- client/src/typescript/types/Colors.ts | 21 +++++++------ 9 files changed, 93 insertions(+), 54 deletions(-) create mode 100644 client/src/components/Navigation/Navbar.tsx create mode 100644 client/src/components/Navigation/routes.json create mode 100644 client/src/components/UI/PageHeader.tsx diff --git a/client/public/favicon.ico b/client/public/favicon.ico index a11777cc471a4344702741ab1c8a588998b1311a..ead004dc3b40adecd8b7f7c853881e9ff7279ef0 100644 GIT binary patch literal 1150 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 baj7?x%VD!5Cxk2YbYLNVeiXvvpMCWYo=by@ 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];