68 lines
1.6 KiB
Plaintext
68 lines
1.6 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 }
|
|
size?: 'md' | 'xs'
|
|
}
|
|
|
|
const { layoutHeader, size = 'xs', ...baseLayoutProps } = Astro.props
|
|
---
|
|
|
|
<BaseLayout
|
|
classNames={{
|
|
main: cn(
|
|
'flex grow flex-col justify-center-safe',
|
|
{
|
|
'xs:items-center-safe': size === 'xs',
|
|
'md:items-center-safe': size === 'md',
|
|
},
|
|
baseLayoutProps.classNames?.main
|
|
),
|
|
}}
|
|
{...baseLayoutProps}
|
|
>
|
|
<div
|
|
class={cn('bg-night-800 border-night-500 contents w-full rounded-xl border p-8', {
|
|
'xs:block xs:max-w-screen-xs': size === 'xs',
|
|
'md:block md:max-w-screen-md': size === 'md',
|
|
})}
|
|
>
|
|
<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={cn(
|
|
'font-title text-day-200 mt-1 text-center text-3xl font-semibold',
|
|
!layoutHeader.subtitle && {
|
|
'xs:mb-8 mb-6': size === 'xs',
|
|
'mb-6 md:mb-8': size === 'md',
|
|
}
|
|
)}
|
|
>
|
|
{layoutHeader.title}
|
|
</h1>
|
|
{
|
|
!!layoutHeader.subtitle && (
|
|
<p
|
|
class={cn('text-day-500 mt-1 mb-6 text-center', {
|
|
'xs:mb-8': size === 'xs',
|
|
'md:mb-8': size === 'md',
|
|
})}
|
|
>
|
|
{layoutHeader.subtitle}
|
|
</p>
|
|
)
|
|
}
|
|
|
|
<slot />
|
|
</div>
|
|
</BaseLayout>
|