73 lines
2.7 KiB
TypeScript
73 lines
2.7 KiB
TypeScript
import { Button } from '@scandic-hotels/design-system/Button'
|
|
import { Chips } from '@scandic-hotels/design-system/Chips'
|
|
import { ChipButton } from '@scandic-hotels/design-system/ChipButton'
|
|
import { ChipLink } from '@scandic-hotels/design-system/ChipLink'
|
|
import { Typography } from '@scandic-hotels/design-system/Typography'
|
|
|
|
import styles from './header.module.css'
|
|
|
|
import type { PressEvent } from 'react-aria-components'
|
|
|
|
export function Header() {
|
|
const onPress = (e: PressEvent) => alert(e.target.innerHTML)
|
|
const onClick = (e: React.MouseEvent<HTMLAnchorElement>) =>
|
|
alert(`Link to: ${e.currentTarget.href}`)
|
|
|
|
return (
|
|
<header className={styles.header}>
|
|
<Typography variant="Title/lg">
|
|
<h1 className={styles.title}>Nyhavn</h1>
|
|
</Typography>
|
|
<div className={styles.intro}>
|
|
<Typography variant="Body/Paragraph/mdRegular">
|
|
<p className={styles.introText}>
|
|
Welcome to Nyhavn, Copenhagen's captivating waterfront district!
|
|
Explore this vibrant area known for its colorful 17th-century
|
|
townhouses, historic wooden ships, and lively atmosphere. Nyhavn is
|
|
the perfect spot for dining, culture, and picturesque views, making
|
|
it a must-visit for every Copenhagen traveler.
|
|
</p>
|
|
</Typography>
|
|
<span>
|
|
<Button
|
|
variant="Tertiary"
|
|
size="Medium"
|
|
typography="Body/Paragraph/mdBold"
|
|
>
|
|
Explore nearby hotels
|
|
</Button>
|
|
</span>
|
|
</div>
|
|
|
|
<div className={styles.chips}>
|
|
<Chips>
|
|
<ChipButton onPress={onPress}>Restaurants and bars</ChipButton>
|
|
<ChipLink onClick={onClick} href="/kristianshavn">
|
|
Kristianshavn
|
|
</ChipLink>
|
|
<ChipButton onPress={onPress}>Tivoli Gardens</ChipButton>
|
|
<ChipLink onClick={onClick} href="/copenhagen">
|
|
See all Copenhagen
|
|
</ChipLink>
|
|
<ChipButton onPress={onPress}>See all Copenhagen</ChipButton>
|
|
<ChipLink onClick={onClick} href="/copenhagen">
|
|
See all Copenhagen
|
|
</ChipLink>
|
|
<ChipButton onPress={onPress}>See all Copenhagen</ChipButton>
|
|
<ChipLink onClick={onClick} href="/copenhagen">
|
|
See all Copenhagen
|
|
</ChipLink>
|
|
<ChipButton onPress={onPress}>See all Copenhagen</ChipButton>
|
|
<ChipLink onClick={onClick} href="/copenhagen">
|
|
See all Copenhagen
|
|
</ChipLink>
|
|
<ChipButton onPress={onPress}>See all Copenhagen</ChipButton>
|
|
<ChipLink onClick={onClick} href="/copenhagen">
|
|
See all Copenhagen
|
|
</ChipLink>
|
|
</Chips>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|