mirrors/snippet-box
1
0
Fork 0
mirror of https://github.com/pawelmalak/snippet-box.git synced 2025-12-21 13:23:05 +01:00
Code Issues Projects Releases Wiki Activity

Favicon. Various UI components

Browse Source
This commit is contained in:
unknown
2021-09-21 15:47:46 +02:00
parent b8b0603b3f
commit 952ebb5d3a
9 changed files with 93 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
client/public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

31
client/public/index.html
View File

@@ -5,39 +5,10 @@
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <title>Snippet Box</title>
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body> </body>
</html> </html>

23
client/src/components/Navigation/Navbar.tsx Normal file
View File

@@ -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 (
<nav className='navbar navbar-dark bg-dark navbar-expand'>
<div className='container-fluid'>
<ul className='navbar-nav'>
{routes.map(({ name, dest }, idx) => (
<li className='nav-item' key={idx}>
<NavLink exact to={dest} className='nav-link'>
{name}
</NavLink>
</li>
))}
</ul>
</div>
</nav>
);
};

12
client/src/components/Navigation/routes.json Normal file
View File

@@ -0,0 +1,12 @@
{
"routes": [
{
"name": "Home",
"dest": "/"
},
{
"name": "Snippets",
"dest": "/snippets"
}
]
}

16
client/src/components/UI/Badge.tsx
View File

@@ -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 => { export const Badge = (props: Props): JSX.Element => {
const Icon = require('@icons-pack/react-simple-icons/lib/components/Youtube'); const { text, color } = props;
return ( return <span className={`badge bg-${color}`}>{text}</span>;
<span className='badge bg-primary'>
<ReactJs color='#61dafb' size={24} />
New
</span>
);
}; };

17
client/src/components/UI/Button.tsx
View File

@@ -6,19 +6,28 @@ interface Props {
outline?: boolean; outline?: boolean;
small?: boolean; small?: boolean;
handler?: () => void; handler?: () => void;
classes?: string;
} }
export const Button = (props: Props): JSX.Element => { 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', 'btn',
outline ? `btn-outline-${color}` : `btn-${color}`, outline ? `btn-outline-${color}` : `btn-${color}`,
small && 'btn-sm' small && 'btn-sm',
classes
]; ];
return ( return (
<button type='button' className={classes.join(' ')} onClick={handler}> <button type='button' className={elClasses.join(' ')} onClick={handler}>
{text} {text}
</button> </button>
); );

23
client/src/components/UI/PageHeader.tsx Normal file
View File

@@ -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 (
<div className='col-12'>
<h2>{title}</h2>
{prevDest && (
<h6>
<Link to={prevDest} className='text-decoration-none text-dark'>
&lt;- Go back
</Link>
</h6>
)}
</div>
);
};

4
client/src/components/UI/Spinner.module.css
View File

@@ -1,14 +1,14 @@
.Spinner, .Spinner,
.Spinner:before, .Spinner:before,
.Spinner:after { .Spinner:after {
background: #3459e6; background: #212529;
-webkit-animation: load1 1s infinite ease-in-out; -webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out; animation: load1 1s infinite ease-in-out;
width: 1em; width: 1em;
height: 4em; height: 4em;
} }
.Spinner { .Spinner {
color: #3459e6; color: #212529;
text-indent: -9999em; text-indent: -9999em;
margin: 88px auto; margin: 88px auto;
position: relative; position: relative;

21
client/src/typescript/types/Colors.ts
View File

@@ -1,9 +1,12 @@
export type Color = export const colors = [
| 'primary' 'primary',
| 'secondary' 'secondary',
| 'success' 'success',
| 'info' 'info',
| 'warning' 'warning',
| 'danger' 'danger',
| 'light' 'light',
| 'dark'; 'dark'
] as const;
export type Color = typeof colors[number];