mirror of
https://github.com/pawelmalak/snippet-box.git
synced 2025-12-21 13:23:05 +01:00
Favicon. Various UI components
This commit is contained in:
unknown
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 1.1 KiB |
@@ -5,39 +5,10 @@
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
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>
|
||||
<title>Snippet Box</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<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>
|
||||
</html>
|
||||
|
||||
23
client/src/components/Navigation/Navbar.tsx
Normal file
23
client/src/components/Navigation/Navbar.tsx
Normal 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
12
client/src/components/Navigation/routes.json
Normal file
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"routes": [
|
||||
{
|
||||
"name": "Home",
|
||||
"dest": "/"
|
||||
},
|
||||
{
|
||||
"name": "Snippets",
|
||||
"dest": "/snippets"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -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 (
|
||||
<span className='badge bg-primary'>
|
||||
<ReactJs color='#61dafb' size={24} />
|
||||
New
|
||||
</span>
|
||||
);
|
||||
return <span className={`badge bg-${color}`}>{text}</span>;
|
||||
};
|
||||
|
||||
@@ -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 (
|
||||
<button type='button' className={classes.join(' ')} onClick={handler}>
|
||||
<button type='button' className={elClasses.join(' ')} onClick={handler}>
|
||||
{text}
|
||||
</button>
|
||||
);
|
||||
|
||||
23
client/src/components/UI/PageHeader.tsx
Normal file
23
client/src/components/UI/PageHeader.tsx
Normal 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'>
|
||||
<- Go back
|
||||
</Link>
|
||||
</h6>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -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;
|
||||
|
||||
@@ -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];
|
||||
|
||||
Reference in New Issue
Block a user