Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Crossroad for root page #474

Merged
merged 1 commit into from
Nov 23, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 0 additions & 11 deletions next.config.ts
Original file line number Diff line number Diff line change
@@ -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 [
Expand All @@ -26,9 +15,9 @@
remotePatterns: [
{
// TODO: neviem, preco to krici, treba overit, ci funguju obrazky pri ulohach
// @ts-ignore

Check warning on line 18 in next.config.ts

View workflow job for this annotation

GitHub Actions / branch-test

Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free
protocol: process.env.NEXT_PUBLIC_BE_PROTOCOL,
// @ts-ignore

Check warning on line 20 in next.config.ts

View workflow job for this annotation

GitHub Actions / branch-test

Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free
hostname: process.env.NEXT_PUBLIC_BE_HOSTNAME,
port: process.env.NEXT_PUBLIC_BE_PORT,
pathname: '/media/**',
Expand All @@ -39,7 +28,7 @@
// https://react-svgr.com/docs/next/
webpack(config) {
// Grab the existing rule that handles SVG imports
const fileLoaderRule = config.module.rules.find((rule: any) => rule.test?.test?.('.svg'))

Check warning on line 31 in next.config.ts

View workflow job for this annotation

GitHub Actions / branch-test

Unexpected any. Specify a different type

config.module.rules.push(
// Reapply the existing rule, but only for svg imports ending in ?url
Expand Down
54 changes: 54 additions & 0 deletions src/components/Crossroad/Crossroad.tsx
Original file line number Diff line number Diff line change
@@ -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 ? (
<Stack justifyContent="center" alignItems="center" height="100dvh" sx={{bgcolor: 'black'}}>
<Typography variant="crossroadButton" sx={{color: 'white'}}>
Máš problém?
</Typography>
<Stack spacing={2} direction="row">
<Link variant="crossroadButton" href="https://r.mtdv.me/articles/mam-problem" invertColors>
Áno
</Link>
<Button variant="crossroadButton" onClick={() => setIsProblem(true)} invertColors>
Nie
</Button>
</Stack>
</Stack>
) : (
<Stack alignItems="stretch" height="100vh" sx={{bgcolor: 'black'}}>
<Grid container disableEqualOverflow columnSpacing={{xs: 2, md: 3, lg: 4}} mt={'30vh'} flexGrow={1}>
<Grid xs={0} md={3} display={{xs: 'none', md: 'flex'}} height="70dvh" justifyContent="end">
<Box>
<Strom width="100%" height="100%" preserveAspectRatio="xMaxYMin" />
</Box>
</Grid>
<Grid xs={12} md={9}>
<Stack gap={{xs: 1, sm: 2}}>
{crossroadItems.map(({label, url}) => (
<Link key={label} variant="crossroadButton" href={url} invertColors>
{label}
</Link>
))}
</Stack>
</Grid>
</Grid>
</Stack>
)
}
7 changes: 7 additions & 0 deletions src/pages/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import {NextPage} from 'next'

import {Crossroad} from '@/components/Crossroad/Crossroad'

const Page: NextPage = () => <Crossroad />

export default Page
5 changes: 5 additions & 0 deletions src/svg/strom.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 20 additions & 0 deletions src/theme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -44,6 +46,7 @@ declare module '@mui/material/Typography' {
button1: true
button2: true
button3: true
crossroadButton: true
seminarButton: true
postTitle: true
postBody: true
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -196,6 +205,7 @@ const _theme = createTheme({
button1: 'span',
button2: 'span',
button3: 'span',
crossroadButton: 'span',
seminarButton: 'span',
postTitle: 'h1',
postBody: 'span',
Expand Down Expand Up @@ -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
Expand Down
Loading