48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Box } from '@/ui/Box';
|
|
import { Text } from '@/ui/Text';
|
|
|
|
interface AuthCardProps {
|
|
children: React.ReactNode;
|
|
title: string;
|
|
description?: string;
|
|
}
|
|
|
|
/**
|
|
* AuthCard
|
|
*
|
|
* A matte surface container for auth forms with a subtle accent glow.
|
|
*/
|
|
export function AuthCard({ children, title, description }: AuthCardProps) {
|
|
return (
|
|
<Box bg="surface-charcoal" border borderColor="outline-steel" rounded="lg" shadow="card" position="relative" overflow="hidden">
|
|
{/* Subtle top accent line */}
|
|
<Box
|
|
position="absolute"
|
|
top="0"
|
|
left="0"
|
|
w="full"
|
|
h="1px"
|
|
bg="linear-gradient(to right, transparent, rgba(25, 140, 255, 0.3), transparent)"
|
|
/>
|
|
|
|
<Box p={{ base: 6, md: 8 }}>
|
|
<Box as="header" mb={8} textAlign="center">
|
|
<Text as="h1" size="xl" weight="semibold" color="text-white" letterSpacing="tight" mb={2} block>
|
|
{title}
|
|
</Text>
|
|
{description && (
|
|
<Text size="sm" color="text-med" block>
|
|
{description}
|
|
</Text>
|
|
)}
|
|
</Box>
|
|
|
|
{children}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|