49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Card } from '@/ui/Card';
|
|
import { Stack } from '@/ui/Stack';
|
|
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 (
|
|
<Card bg="surface-charcoal" borderColor="outline-steel" rounded="lg" position="relative" overflow="hidden">
|
|
{/* Subtle top accent line */}
|
|
<Stack
|
|
position="absolute"
|
|
top="0"
|
|
left="0"
|
|
w="full"
|
|
h="1px"
|
|
bg="linear-gradient(to right, transparent, rgba(25, 140, 255, 0.3), transparent)"
|
|
>{null}</Stack>
|
|
|
|
<Stack p={{ base: 6, md: 8 }}>
|
|
<Stack as="header" mb={8} align="center">
|
|
<Text as="h1" size="xl" weight="semibold" color="text-white" letterSpacing="tight" mb={2} block textAlign="center">
|
|
{title}
|
|
</Text>
|
|
{description && (
|
|
<Text size="sm" color="text-med" block textAlign="center">
|
|
{description}
|
|
</Text>
|
|
)}
|
|
</Stack>
|
|
|
|
{children}
|
|
</Stack>
|
|
</Card>
|
|
);
|
|
}
|