import { Card, HStack, Input, Separator, Stack, Text } from '@chakra-ui/react'
import { SiGithub, SiGoogle } from 'react-icons/si'
import { Button } from '~/components/ui/button'
import { Field } from '~/components/ui/field'

export const Example = () => {
  return (
    <Card.Root variant="elevated" boxShadow="lg">
      <Card.Header gap="1">
        <Card.Title>Sign Up</Card.Title>
        <Card.Description>
          Create an account and discover the worlds' best UI component framework.
        </Card.Description>
      </Card.Header>
      <Card.Body>
        <Stack gap="4" width="full">
          <Stack direction="row" gap="3">
            <Button variant="outline" colorPalette="gray" flex="1">
              <SiGoogle />
              Google
            </Button>
            <Button variant="outline" colorPalette="gray" flex="1">
              <SiGithub />
              GitHub
            </Button>
          </Stack>
          <HStack gap="2">
            <Separator />
            <Text color="fg.subtle" textStyle="sm" whiteSpace="nowrap">
              or sign up with
            </Text>
            <Separator />
          </HStack>
          <Field label="E-Mail">
            <Input type="email" placeholder="Your E-Mail" />
          </Field>
          <Field label="Password">
            <Input type="password" placeholder="Your Password" />
          </Field>
        </Stack>
      </Card.Body>
      <Card.Footer>
        <Button width="full">Create Account</Button>
      </Card.Footer>
    </Card.Root>
  )
}
Cards

Card Authentification

Card Ecommerce

Card Notification

Card Payment

Card Pricing

Card Report Issue

Card Share Documents

Card With Tabs
