Card

import { Button } from 'radcn/button'
import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'radcn/card'
import { Input } from 'radcn/input'
import { Label } from 'radcn/label'
import { Select, SelectContent, SelectItem, SelectPortal, SelectTrigger, SelectValue, SelectViewport } from 'radcn/select'

export function CardExamples() {
  return (
    <>
      <Card style="width:min(100%,24rem);">
        <CardHeader>
          <CardTitle>Login to your account</CardTitle>
          <CardDescription>Enter your email below to login to your account</CardDescription>
          <CardAction><Button href="/signup" variant="link">Sign Up</Button></CardAction>
        </CardHeader>
        <form action="/login" method="post">
          <CardContent>
            <Label for="email">Email</Label>
            <Input id="email" name="email" required type="email" placeholder="m@example.com" />
            <Label for="password">Password</Label>
            <Input id="password" name="password" required type="password" />
          </CardContent>
          <CardFooter>
            <Button type="submit" style="width:100%;">Login</Button>
            <Button variant="outline" style="width:100%;">Login with Google</Button>
          </CardFooter>
        </form>
      </Card>

      <Card style="width:min(100%,350px);">
        <CardHeader>
          <CardTitle>Create project</CardTitle>
          <CardDescription>Deploy your new project in one-click.</CardDescription>
        </CardHeader>
        <form action="/projects" method="post">
          <CardContent>
            <Label for="project-name">Name</Label>
            <Input id="project-name" name="project" placeholder="Name of your project" />
            <Label for="framework">Framework</Label>
            <Select defaultOpen id="framework" name="framework">
              <SelectTrigger><SelectValue placeholder="Select" /></SelectTrigger>
              <SelectPortal>
                <SelectContent position="popper">
                  <SelectViewport>
                    <SelectItem value="next">Next.js</SelectItem>
                    <SelectItem value="sveltekit">SvelteKit</SelectItem>
                    <SelectItem value="astro">Astro</SelectItem>
                    <SelectItem value="nuxt">Nuxt.js</SelectItem>
                  </SelectViewport>
                </SelectContent>
              </SelectPortal>
            </Select>
          </CardContent>
          <CardFooter style="justify-content:space-between;">
            <Button variant="outline">Cancel</Button>
            <Button type="submit">Deploy</Button>
          </CardFooter>
        </form>
      </Card>
    </>
  )
}