Auth

import { Button, Input, Label, Separator, Stack, Text } from "@gpuixui/primitives";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@gpuixui/components/card";

export function SignInCard() {
  return (
    <Card variant="outline" style={{ width: 360 }}>
      <CardHeader>
        <CardTitle>Login to your account</CardTitle>
        <CardDescription>Enter your email below to login to your account</CardDescription>
      </CardHeader>
      <CardContent>
        <Stack direction="column" gap="md">
          <Label>Email</Label>
          <Input label="Email" placeholder="you@example.com" fullWidth />
          <Label>Password</Label>
          <Input label="Password" placeholder="••••••••" fullWidth />
          <Button variant="primary" fullWidth onActivate={signIn}>
            Sign in
          </Button>
          <Separator label="or continue with" />
          <Button variant="secondary" fullWidth onActivate={signInWithGitHub}>
            GitHub
          </Button>
        </Stack>
      </CardContent>
      <Text role="caption" tone="muted">
        Don't have an account?
      </Text>
    </Card>
  );
}