mirror of
https://github.com/pawelmalak/flame.git
synced 2024-10-04 21:17:34 +03:00
Home and Settings components
This commit is contained in:
parent
0502a653ac
commit
8392c2422a
@ -1,3 +1,17 @@
|
|||||||
|
.Header h1 {
|
||||||
|
color: var(--color-primary);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 4em;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Header p {
|
||||||
|
color: var(--color-primary);
|
||||||
|
font-weight: 300;
|
||||||
|
text-transform: uppercase;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
.SettingsButton {
|
.SettingsButton {
|
||||||
width: 35px;
|
width: 35px;
|
||||||
height: 35px;
|
height: 35px;
|
||||||
|
@ -3,22 +3,65 @@ import Icon from '../UI/Icon/Icon';
|
|||||||
|
|
||||||
import classes from './Home.module.css';
|
import classes from './Home.module.css';
|
||||||
import { Container } from '../UI/Layout/Layout';
|
import { Container } from '../UI/Layout/Layout';
|
||||||
import Headline from '../UI/Headline/Headline';
|
import Headline from '../UI/Headlines/Headline/Headline';
|
||||||
|
import SectionHeadline from '../UI/Headlines/SectionHeadline/SectionHeadline';
|
||||||
|
import Apps from '../Apps/Apps';
|
||||||
|
|
||||||
const Home = (): JSX.Element => {
|
const Home = (): JSX.Element => {
|
||||||
const dateAndTime = (): string => {
|
const dateAndTime = (): string => {
|
||||||
const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
|
const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
|
||||||
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
|
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
|
||||||
|
|
||||||
const date = new Date();
|
const now = new Date();
|
||||||
|
|
||||||
|
return `${days[now.getDay()]}, ${now.getDate()} of ${months[now.getMonth()]} ${now.getFullYear()}`;
|
||||||
return `${days[date.getDay()]}, ${date.getDate()} of ${months[date.getMonth()]} ${date.getFullYear()}`;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const greeter = (): string => {
|
||||||
|
const now = new Date().getHours();
|
||||||
|
let msg: string;
|
||||||
|
|
||||||
|
if (now > 18) {
|
||||||
|
msg = 'Good evening!';
|
||||||
|
} else if (now > 12) {
|
||||||
|
msg = 'Good afternoon!';
|
||||||
|
} else if (now > 6) {
|
||||||
|
msg = 'Good morning!';
|
||||||
|
} else if (now > 0) {
|
||||||
|
msg = 'Good night!';
|
||||||
|
} else {
|
||||||
|
msg = 'Hello!';
|
||||||
|
}
|
||||||
|
|
||||||
|
return msg;
|
||||||
|
}
|
||||||
|
|
||||||
|
(() => {
|
||||||
|
const mdiName = 'book-open-blank-variant';
|
||||||
|
const expected = 'mdiBookOpenBlankVariant';
|
||||||
|
|
||||||
|
let parsedName = mdiName
|
||||||
|
.split('-')
|
||||||
|
.map((word: string) => `${word[0].toUpperCase()}${word.slice(1)}`)
|
||||||
|
.join('');
|
||||||
|
parsedName = `mdi${parsedName}`;
|
||||||
|
|
||||||
|
console.log(parsedName);
|
||||||
|
console.log(parsedName === expected);
|
||||||
|
})();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Container>
|
<Container>
|
||||||
<Headline title='Home' subtitle={dateAndTime()} />
|
<header className={classes.Header}>
|
||||||
|
<p>{dateAndTime()}</p>
|
||||||
|
<h1>{greeter()}</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<SectionHeadline title='Apps' />
|
||||||
|
<Apps />
|
||||||
|
|
||||||
|
<SectionHeadline title='Bookmarks' />
|
||||||
|
|
||||||
<Link to='/settings' className={classes.SettingsButton}>
|
<Link to='/settings' className={classes.SettingsButton}>
|
||||||
<Icon icon='mdiCog' />
|
<Icon icon='mdiCog' />
|
||||||
</Link>
|
</Link>
|
||||||
|
31
client/src/components/Settings/Settings.module.css
Normal file
31
client/src/components/Settings/Settings.module.css
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
.Settings {
|
||||||
|
width: 100%;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 3fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.SettingsNav {
|
||||||
|
/* background-color: coral; */
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.SettingsNavLink {
|
||||||
|
padding-left: 7px;
|
||||||
|
border-left: 3px solid transparent;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.SettingsNavLink:hover {
|
||||||
|
border-left: 3px solid var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.SettingsNavLinkActive {
|
||||||
|
border-left: 3px solid var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.SettingsContent {
|
||||||
|
/* background-color:springgreen; */
|
||||||
|
}
|
@ -1,15 +1,48 @@
|
|||||||
import { Link } from 'react-router-dom';
|
import { NavLink, Link, Switch, Route, withRouter, match } from 'react-router-dom';
|
||||||
|
|
||||||
|
import classes from './Settings.module.css';
|
||||||
|
|
||||||
|
import { Container } from '../UI/Layout/Layout';
|
||||||
|
import Headline from '../UI/Headlines/Headline/Headline';
|
||||||
import Themer from '../Themer/Themer';
|
import Themer from '../Themer/Themer';
|
||||||
|
|
||||||
const Settings = (): JSX.Element => {
|
interface ComponentProps {
|
||||||
|
match: match;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Settings = (props: ComponentProps): JSX.Element => {
|
||||||
return (
|
return (
|
||||||
<div>
|
<Container>
|
||||||
<h1>settings</h1>
|
<Headline
|
||||||
<Link to='/'>Home</Link>
|
title='Settings'
|
||||||
<Themer />
|
subtitle={<Link to='/'>Go back</Link>}
|
||||||
</div>
|
/>
|
||||||
|
<div className={classes.Settings}>
|
||||||
|
<nav className={classes.SettingsNav}>
|
||||||
|
<NavLink
|
||||||
|
className={classes.SettingsNavLink}
|
||||||
|
activeClassName={classes.SettingsNavLinkActive}
|
||||||
|
exact
|
||||||
|
to='/settings'>
|
||||||
|
Theme
|
||||||
|
</NavLink>
|
||||||
|
<NavLink
|
||||||
|
className={classes.SettingsNavLink}
|
||||||
|
activeClassName={classes.SettingsNavLinkActive}
|
||||||
|
exact
|
||||||
|
to='/settings/nothig'>
|
||||||
|
Nothing
|
||||||
|
</NavLink>
|
||||||
|
</nav>
|
||||||
|
<section className={classes.SettingsContent}>
|
||||||
|
{/* <Themer /> */}
|
||||||
|
<Switch>
|
||||||
|
<Route exact path='/settings' component={Themer} />
|
||||||
|
</Switch>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</Container>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Settings;
|
export default withRouter(Settings);
|
@ -1,4 +1,4 @@
|
|||||||
import { useEffect, Fragment } from 'react';
|
import { Fragment } from 'react';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
|
|
||||||
import classes from './Themer.module.css';
|
import classes from './Themer.module.css';
|
||||||
@ -6,8 +6,6 @@ import classes from './Themer.module.css';
|
|||||||
import { themes } from './themes.json';
|
import { themes } from './themes.json';
|
||||||
import { Theme } from '../../interfaces/Theme';
|
import { Theme } from '../../interfaces/Theme';
|
||||||
import ThemePreview from './ThemePreview';
|
import ThemePreview from './ThemePreview';
|
||||||
import { Container } from '../UI/Layout/Layout';
|
|
||||||
import Headline from '../UI/Headline/Headline';
|
|
||||||
|
|
||||||
import { setTheme } from '../../store/actions';
|
import { setTheme } from '../../store/actions';
|
||||||
|
|
||||||
@ -16,32 +14,18 @@ interface ComponentProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const Themer = (props: ComponentProps): JSX.Element => {
|
const Themer = (props: ComponentProps): JSX.Element => {
|
||||||
useEffect((): void => {
|
|
||||||
if (localStorage.theme) {
|
|
||||||
applyTheme(localStorage.theme);
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const applyTheme = (themeName: string): void => {
|
|
||||||
const newTheme = themes.find((theme: Theme) => theme.name === themeName);
|
|
||||||
|
|
||||||
if (newTheme) {
|
|
||||||
for (const [key, value] of Object.entries(newTheme.colors)) {
|
|
||||||
document.body.style.setProperty(`--color-${key}`, value);
|
|
||||||
}
|
|
||||||
localStorage.setItem('theme', themeName);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<div>
|
<div>
|
||||||
{/* <Headline
|
|
||||||
title='Themes'
|
|
||||||
subtitle='Select new theme by clicking on it'
|
|
||||||
/> */}
|
|
||||||
<div className={classes.ThemerGrid}>
|
<div className={classes.ThemerGrid}>
|
||||||
{themes.map((theme: Theme): JSX.Element => <ThemePreview theme={theme} applyTheme={props.setTheme} />)}
|
{themes.map((theme: Theme, idx: number): JSX.Element => (
|
||||||
|
<ThemePreview
|
||||||
|
key={idx}
|
||||||
|
theme={theme}
|
||||||
|
applyTheme={props.setTheme}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Fragment>
|
</Fragment>
|
||||||
|
Loading…
Reference in New Issue
Block a user