blob: c434c4b7d4179c2f079afa66c027132e9e9502c5 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
import { Skeleton } from "@/components/ui/skeleton"
import { Button } from "@/components/ui/button"
import { Ship, Loader2, GlobeIcon, ChevronDownIcon } from "lucide-react"
import Link from "next/link"
import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"
export function LoginFormSkeleton() {
return (
<div className="container relative flex h-screen flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0">
{/* Left Content */}
<div className="flex flex-col w-full h-screen lg:p-2">
{/* Top bar with Logo + eVCP (left) and "Request Vendor Repository" (right) */}
<div className="flex items-center justify-between">
<div className="flex items-center space-x-2">
<Ship className="w-4 h-4" />
<span className="text-md font-bold">eVCP</span>
</div>
<Link
href="/partners/repository"
className={cn(buttonVariants({ variant: "ghost" }))}
>
Request Vendor Repository
</Link>
</div>
{/* Content section that occupies remaining space, centered vertically */}
<div className="flex-1 flex items-center justify-center">
{/* Form container */}
<div className="mx-auto w-full flex flex-col space-y-6 sm:w-[350px]">
<div className="p-6 md:p-8">
<div className="flex flex-col gap-6">
<div className="flex flex-col items-center text-center">
<Skeleton className="h-8 w-48 mb-2" />
</div>
<div className="grid gap-2">
<Skeleton className="h-10 w-full" />
</div>
<Skeleton className="h-10 w-full" />
<div className="text-center text-sm mx-auto">
<Button variant="ghost" className="flex items-center gap-2" disabled>
<GlobeIcon className="h-4 w-4" />
<Skeleton className="h-4 w-16" />
<ChevronDownIcon className="h-4 w-4" />
</Button>
</div>
</div>
</div>
<div className="text-balance text-center">
<Skeleton className="h-4 w-[280px] mx-auto" />
</div>
</div>
</div>
</div>
{/* Right BG 이미지 영역 */}
<div className="relative hidden h-full flex-col p-10 text-white dark:border-r md:flex">
<div className="absolute inset-0 bg-zinc-100 animate-pulse" />
<div className="relative z-20 flex items-center text-lg font-medium">
{/* Optional top-right content on the image side */}
</div>
<div className="relative z-20 mt-auto">
<blockquote className="space-y-2">
<Skeleton className="h-4 w-[250px] bg-white/50" />
</blockquote>
</div>
</div>
</div>
)
}
|
