39 lines
1.1 KiB
Plaintext
39 lines
1.1 KiB
Plaintext
---
|
|
import { Icon } from 'astro-icon/components'
|
|
|
|
import { cn } from '../lib/cn'
|
|
|
|
import BaseLayout from './BaseLayout.astro'
|
|
|
|
import type { ComponentProps } from 'astro/types'
|
|
|
|
type Props = Omit<ComponentProps<typeof BaseLayout>, 'widthClassName'> & {
|
|
layoutHeader: { icon: string; title: string; subtitle: string }
|
|
}
|
|
|
|
const { layoutHeader, ...baseLayoutProps } = Astro.props
|
|
---
|
|
|
|
<BaseLayout
|
|
className={{
|
|
...baseLayoutProps.className,
|
|
main: cn('xs:items-center-safe flex grow flex-col justify-center-safe', baseLayoutProps.className?.main),
|
|
}}
|
|
{...baseLayoutProps}
|
|
>
|
|
<div
|
|
class="bg-night-800 border-night-500 xs:block xs:max-w-screen-xs contents w-full rounded-xl border p-8"
|
|
>
|
|
<div class="bg-day-200 mx-auto flex size-12 items-center justify-center rounded-lg">
|
|
<Icon name={layoutHeader.icon} class="text-night-800 size-8" />
|
|
</div>
|
|
|
|
<h1 class="font-title text-day-200 mt-1 text-center text-3xl font-semibold">
|
|
{layoutHeader.title}
|
|
</h1>
|
|
<p class="text-day-500 xs:mb-8 mt-1 mb-6 text-center">{layoutHeader.subtitle}</p>
|
|
|
|
<slot />
|
|
</div>
|
|
</BaseLayout>
|