Login Signup with Role Selection

1'use client';
2 
3import { BarChart, Code, Eye, EyeOff, User } from 'lucide-react';
4import Link from 'next/link';
5import { type JSX, type SVGProps, useState } from 'react';
6import { Button } from '@/components/ui/button';
7import {
8  Card,
9  CardContent,
10  CardFooter,
11  CardHeader,
12} from '@/components/ui/card';
13import { Checkbox } from '@/components/ui/checkbox';
14import { Input } from '@/components/ui/input';
15import { Label } from '@/components/ui/label';
16import {
17  Select,
18  SelectContent,
19  SelectItem,
20  SelectTrigger,
21  SelectValue,
22} from '@/components/ui/select';
23 
24const Logo = (props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) => (
25  <svg
26    fill="currentColor"
27    height="48"
28    viewBox="0 0 40 48"
29    width="40"
30    {...props}
31  >
32    <clipPath id="a">
33      <path d="m0 0h40v48h-40z" />
34    </clipPath>
35    <g clipPath="url(#a)">
36      <path d="m25.0887 5.05386-3.933-1.05386-3.3145 12.3696-2.9923-11.16736-3.9331 1.05386 3.233 12.0655-8.05262-8.0526-2.87919 2.8792 8.83271 8.8328-10.99975-2.9474-1.05385625 3.933 12.01860625 3.2204c-.1376-.5935-.2104-1.2119-.2104-1.8473 0-4.4976 3.646-8.1436 8.1437-8.1436 4.4976 0 8.1436 3.646 8.1436 8.1436 0 .6313-.0719 1.2459-.2078 1.8359l10.9227 2.9267 1.0538-3.933-12.0664-3.2332 11.0005-2.9476-1.0539-3.933-12.0659 3.233 8.0526-8.0526-2.8792-2.87916-8.7102 8.71026z" />
37      <path d="m27.8723 26.2214c-.3372 1.4256-1.0491 2.7063-2.0259 3.7324l7.913 7.9131 2.8792-2.8792z" />
38      <path d="m25.7665 30.0366c-.9886 1.0097-2.2379 1.7632-3.6389 2.1515l2.8794 10.746 3.933-1.0539z" />
39      <path d="m21.9807 32.2274c-.65.1671-1.3313.2559-2.0334.2559-.7522 0-1.4806-.102-2.1721-.2929l-2.882 10.7558 3.933 1.0538z" />
40      <path d="m17.6361 32.1507c-1.3796-.4076-2.6067-1.1707-3.5751-2.1833l-7.9325 7.9325 2.87919 2.8792z" />
41      <path d="m13.9956 29.8973c-.9518-1.019-1.6451-2.2826-1.9751-3.6862l-10.95836 2.9363 1.05385 3.933z" />
42    </g>
43  </svg>
44);
45 
46export default function SignupForm() {
47  const [showPassword, setShowPassword] = useState(false);
48 
49  return (
50    <div className="flex min-h-dvh items-center justify-center">
51      <div className="w-full max-w-md">
52        <Card className="border-none pb-0 shadow-lg">
53          <CardHeader className="flex flex-col items-center space-y-1.5 pt-6 pb-4">
54            <Logo className="h-12 w-12" />
55            <div className="flex flex-col items-center space-y-0.5">
56              <h2 className="text-balance font-semibold text-2xl text-foreground">
57// … truncated