55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
import { useState } from 'react'
|
|
|
|
import { Typography } from '@scandic-hotels/design-system/Typography'
|
|
|
|
import { ThemeSwitcher } from './ThemeSwitcher'
|
|
import { ContentPage } from './ContentPage'
|
|
|
|
import styles from './main.module.css'
|
|
import { HotelPage } from './HotelPage'
|
|
|
|
export function Main() {
|
|
const [theme, setTheme] = useState('scandic')
|
|
|
|
const pathname = window.location.pathname
|
|
|
|
return (
|
|
<>
|
|
<div className={styles.wrap}>
|
|
<ThemeSwitcher
|
|
defaultSelectedKey={theme}
|
|
onSelectionChange={(key) => {
|
|
setTheme(key.toString())
|
|
}}
|
|
/>
|
|
<nav>
|
|
<ul className={styles.nav}>
|
|
<li>
|
|
<a href="/content-page">Content page</a>
|
|
</li>
|
|
<li>
|
|
<a href="/hotel-page">Hotel page</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
|
|
<div className={[styles.page, theme].join(' ')}>
|
|
{/* poor mans routing */}
|
|
{pathname === '/content-page' && <ContentPage />}
|
|
{pathname === '/hotel-page' && <HotelPage />}
|
|
{pathname === '/' && (
|
|
<>
|
|
<Typography variant="Title/lg">
|
|
<h1>Examples</h1>
|
|
</Typography>
|
|
<Typography variant="Body/Paragraph/mdRegular">
|
|
<p>Select a page</p>
|
|
</Typography>
|
|
</>
|
|
)}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|