Login with Magic Link and SSO

1import type { JSX, SVGProps } from 'react';
2import { Button } from '@/components/ui/button';
3import { Card, CardContent } from '@/components/ui/card';
4import { Input } from '@/components/ui/input';
5import { Separator } from '@/components/ui/separator';
6 
7const Logo = (props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) => (
8  <svg
9    fill="currentColor"
10    height="48"
11    viewBox="0 0 40 48"
12    width="40"
13    {...props}
14  >
15    <clipPath id="a">
16      <path d="m0 0h40v48h-40z" />
17    </clipPath>
18    <g clipPath="url(#a)">
19      <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" />
20      <path d="m27.8723 26.2214c-.3372 1.4256-1.0491 2.7063-2.0259 3.7324l7.913 7.9131 2.8792-2.8792z" />
21      <path d="m25.7665 30.0366c-.9886 1.0097-2.2379 1.7632-3.6389 2.1515l2.8794 10.746 3.933-1.0539z" />
22      <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" />
23      <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" />
24      <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" />
25    </g>
26  </svg>
27);
28 
29export default function Login06() {
30  return (
31    <div className="flex min-h-dvh items-center justify-center">
32      <Card className="w-full max-w-sm rounded-4xl px-6 py-10 pt-14 shadow-2xs">
33        <CardContent className="">
34          <div className="flex flex-col items-center space-y-8">
35            <Logo />
36 
37            <div className="space-y-2 text-center">
38              <h1 className="text-balance font-semibold text-3xl text-foreground">
39                Welcome back!
40              </h1>
41              <p className="text-pretty text-muted-foreground text-sm">
42                First time here?{' '}
43                <a className="text-foreground hover:underline" href="#">
44                  Sign up for free
45                </a>
46              </p>
47            </div>
48 
49            <div className="w-full space-y-4">
50              <Input
51                className="w-full rounded-xl"
52// … truncated