External/kycnotme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Release 202506101742

Browse Source
This commit is contained in:
pluja
2025-06-10 17:42:42 +00:00
parent 459d7c91f7
commit 812937d2c7
50 changed files with 1347 additions and 335 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
web/src/layouts/BaseLayout.astro
View File

@@ -16,7 +16,7 @@ type Props = ComponentProps<typeof BaseHead> & {
children: AstroChildren
errors?: string[]
success?: string[]
className?: {
classNames?: {
body?: string
main?: string
footer?: string
@@ -31,14 +31,16 @@ type Props = ComponentProps<typeof BaseHead> & {
| 'max-w-screen-sm'
| 'max-w-screen-xl'
| 'max-w-screen-xs'
isErrorPage?: boolean
}
const {
errors = [],
success = [],
className,
classNames,
widthClassName = 'max-w-screen-2xl',
showSplashText,
isErrorPage,
...baseHeadProps
} = Astro.props
@@ -77,7 +79,10 @@ const announcement = await Astro.locals.banners.try(
<meta name="viewport" content="width=device-width, initial-scale=1" />
<BaseHead {...baseHeadProps} />
</head>
<body class={cn('bg-night-700 text-day-300 flex min-h-dvh flex-col *:shrink-0', className?.body)}>
<body
class={cn('bg-night-700 text-day-300 flex min-h-dvh flex-col *:shrink-0', classNames?.body)}
data-is-error-page={isErrorPage}
>
{announcement && <AnnouncementBanner announcement={announcement} transition:name="header-announcement" />}
<Header
classNames={{
@@ -116,7 +121,7 @@ const announcement = await Astro.locals.banners.try(
<main
class={cn(
'container mx-auto mt-4 mb-12 grow px-4',
className?.main,
classNames?.main,
(widthClassName === 'max-w-none' || widthClassName === 'max-w-screen-2xl') && 'lg:px-8 2xl:px-12',
widthClassName
)}
@@ -124,6 +129,6 @@ const announcement = await Astro.locals.banners.try(
<slot />
</main>
<Footer class={className?.footer} />
<Footer class={classNames?.footer} />
</body>
</html>

34
web/src/layouts/MiniLayout.astro
View File

@@ -9,20 +9,30 @@ 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, ...baseLayoutProps } = Astro.props
const { layoutHeader, size = 'xs', ...baseLayoutProps } = Astro.props
---
<BaseLayout
className={{
...baseLayoutProps.className,
main: cn('xs:items-center-safe flex grow flex-col justify-center-safe', baseLayoutProps.className?.main),
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="bg-night-800 border-night-500 xs:block xs:max-w-screen-xs contents w-full rounded-xl border p-8"
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" />
@@ -31,14 +41,24 @@ const { layoutHeader, ...baseLayoutProps } = Astro.props
<h1
class={cn(
'font-title text-day-200 mt-1 text-center text-3xl font-semibold',
!layoutHeader.subtitle && 'xs:mb-8 mb-6'
!layoutHeader.subtitle && {
'xs:mb-8 mb-6': size === 'xs',
'mb-6 md:mb-8': size === 'md',
}
)}
>
{layoutHeader.title}
</h1>
{
!!layoutHeader.subtitle && (
<p class="text-day-500 xs:mb-8 mt-1 mb-6 text-center">{layoutHeader.subtitle}</p>
<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>
)
}