diff --git a/next.config.ts b/next.config.ts index 27d31042..11930d0a 100644 --- a/next.config.ts +++ b/next.config.ts @@ -1,17 +1,6 @@ import type {NextConfig} from 'next' const nextConfig: NextConfig = { - // docs: https://nextjs.org/docs/api-reference/next.config.js/redirects - async redirects() { - return [ - // redirect home stranky na strom podstranku - { - source: '/', - destination: '/strom', - permanent: true, - }, - ] - }, // docs: https://nextjs.org/docs/api-reference/next.config.js/rewrites async rewrites() { return [ diff --git a/src/components/Crossroad/Crossroad.tsx b/src/components/Crossroad/Crossroad.tsx new file mode 100644 index 00000000..bfe229e5 --- /dev/null +++ b/src/components/Crossroad/Crossroad.tsx @@ -0,0 +1,54 @@ +import {Box, Stack, Typography} from '@mui/material' +import Grid from '@mui/material/Unstable_Grid2' +import React, {useState} from 'react' + +import Strom from '@/svg/strom.svg' + +import {Button} from '../Clickable/Button' +import {Link} from '../Clickable/Link' + +export const Crossroad: React.FC = () => { + const [isProblem, setIsProblem] = useState(false) + + const crossroadItems = [ + {label: 'STROM', url: 'strom'}, + {label: 'Matik', url: 'matik'}, + {label: 'Malynár', url: 'malynar'}, + {label: 'Kôš', url: 'https://kos.strom.sk'}, + {label: 'Máš problém', url: 'https://masproblem.strom.sk'}, + ] + return !isProblem ? ( + + + Máš problém? + + + + Áno + + + + + ) : ( + + + + + + + + + + {crossroadItems.map(({label, url}) => ( + + {label} + + ))} + + + + + ) +} diff --git a/src/pages/index.tsx b/src/pages/index.tsx new file mode 100644 index 00000000..c0b23e2d --- /dev/null +++ b/src/pages/index.tsx @@ -0,0 +1,7 @@ +import {NextPage} from 'next' + +import {Crossroad} from '@/components/Crossroad/Crossroad' + +const Page: NextPage = () => + +export default Page diff --git a/src/svg/strom.svg b/src/svg/strom.svg new file mode 100644 index 00000000..2eb53c67 --- /dev/null +++ b/src/svg/strom.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/theme.ts b/src/theme.ts index b8a58c65..81575bff 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -8,6 +8,7 @@ declare module '@mui/material/styles' { button1: React.CSSProperties button2: React.CSSProperties button3: React.CSSProperties + crossroadButton: React.CSSProperties seminarButton: React.CSSProperties postTitle: React.CSSProperties postBody: React.CSSProperties @@ -25,6 +26,7 @@ declare module '@mui/material/styles' { button1?: React.CSSProperties button2?: React.CSSProperties button3?: React.CSSProperties + crossroadButton?: React.CSSProperties seminarButton?: React.CSSProperties postTitle?: React.CSSProperties postBody?: React.CSSProperties @@ -44,6 +46,7 @@ declare module '@mui/material/Typography' { button1: true button2: true button3: true + crossroadButton: true seminarButton: true postTitle: true postBody: true @@ -142,6 +145,12 @@ const _theme = createTheme({ fontWeight: 800, fontStyle: 'italic', }, + crossroadButton: { + ...font.style, + textTransform: 'uppercase', + fontWeight: 800, + fontStyle: 'italic', + }, seminarButton: { ...font.style, textTransform: 'uppercase', @@ -196,6 +205,7 @@ const _theme = createTheme({ button1: 'span', button2: 'span', button3: 'span', + crossroadButton: 'span', seminarButton: 'span', postTitle: 'h1', postBody: 'span', @@ -339,6 +349,16 @@ export const theme: Theme = { [xl]: {fontSize: pxToRem(14)}, lineHeight: 1.5, }, + crossroadButton: { + ..._theme.typography.button1, + // original Figma fontSize: 50px + fontSize: pxToRem(20), + [sm]: {fontSize: pxToRem(32)}, + [md]: {fontSize: pxToRem(38)}, + [lg]: {fontSize: pxToRem(44)}, + [xl]: {fontSize: pxToRem(50)}, // design + lineHeight: 1.5, + }, seminarButton: { ..._theme.typography.seminarButton, // original Figma fontSize: 30px, mobile non-existent