UI 수정:화면 수정
This commit is contained in:
549
frontend/src/app/demo/auth-pages/page.tsx
Normal file
549
frontend/src/app/demo/auth-pages/page.tsx
Normal file
@@ -0,0 +1,549 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import Image from "next/image";
|
||||
import { LogIn, Eye, EyeOff, User, Lock } from "lucide-react";
|
||||
|
||||
// 시안 1: 현재 디자인
|
||||
function LoginDesign1() {
|
||||
return (
|
||||
<div className="grid min-h-[600px] lg:grid-cols-2 border rounded-lg overflow-hidden">
|
||||
<div className="bg-white relative hidden lg:flex items-center justify-center">
|
||||
<Image
|
||||
src="/logo-graphic.svg"
|
||||
alt="로고"
|
||||
fill
|
||||
className="object-contain p-16"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col p-6 md:p-10 bg-white">
|
||||
<div className="flex flex-1 items-center justify-center lg:justify-start lg:pl-16">
|
||||
<div className="w-full max-w-[320px] lg:max-w-sm">
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col items-center gap-1 text-center mb-2">
|
||||
<h1 className="text-2xl font-bold">로그인</h1>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
한우 유전능력 컨설팅 서비스에 오신 것을 환영합니다
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">아이디</label>
|
||||
<Input placeholder="아이디를 입력하세요" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">비밀번호</label>
|
||||
<Input type="password" placeholder="비밀번호를 입력하세요" />
|
||||
</div>
|
||||
<Button className="w-full">로그인</Button>
|
||||
<div className="relative my-2">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<span className="w-full border-t" />
|
||||
</div>
|
||||
<div className="relative flex justify-center text-xs uppercase">
|
||||
<span className="bg-white px-2 text-muted-foreground">계정이 없으신가요?</span>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="outline" className="w-full border-2 border-primary text-primary">
|
||||
회원가입
|
||||
</Button>
|
||||
<div className="text-center text-sm">
|
||||
<a href="#" className="hover:underline">아이디 찾기</a>
|
||||
{" | "}
|
||||
<a href="#" className="hover:underline">비밀번호 찾기</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 시안 2: 현재 + 비밀번호 토글 + 아이콘
|
||||
function LoginDesign2() {
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="grid min-h-[600px] lg:grid-cols-2 border rounded-lg overflow-hidden">
|
||||
<div className="bg-white relative hidden lg:flex items-center justify-center">
|
||||
<Image
|
||||
src="/logo-graphic.svg"
|
||||
alt="로고"
|
||||
fill
|
||||
className="object-contain p-16"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col p-6 md:p-10 bg-white">
|
||||
<div className="flex flex-1 items-center justify-center lg:justify-start lg:pl-16">
|
||||
<div className="w-full max-w-[320px] lg:max-w-sm">
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col items-center gap-1 text-center mb-2">
|
||||
<h1 className="text-2xl font-bold">로그인</h1>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
한우 유전능력 컨설팅 서비스에 오신 것을 환영합니다
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">아이디</label>
|
||||
<div className="relative">
|
||||
<User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
|
||||
<Input placeholder="아이디를 입력하세요" className="pl-10" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">비밀번호</label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
|
||||
<Input
|
||||
type={showPassword ? "text" : "password"}
|
||||
placeholder="비밀번호를 입력하세요"
|
||||
className="pl-10 pr-10"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
{showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<Button className="w-full">
|
||||
<LogIn className="w-4 h-4 mr-2" />
|
||||
로그인
|
||||
</Button>
|
||||
<div className="relative my-2">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<span className="w-full border-t" />
|
||||
</div>
|
||||
<div className="relative flex justify-center text-xs uppercase">
|
||||
<span className="bg-white px-2 text-muted-foreground">계정이 없으신가요?</span>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="outline" className="w-full border-2 border-primary text-primary">
|
||||
회원가입
|
||||
</Button>
|
||||
<div className="text-center text-sm">
|
||||
<a href="#" className="hover:underline">아이디 찾기</a>
|
||||
{" | "}
|
||||
<a href="#" className="hover:underline">비밀번호 찾기</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 시안 3: 현재 + 더 큰 입력 필드 + 부드러운 그림자
|
||||
function LoginDesign3() {
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="grid min-h-[600px] lg:grid-cols-2 border rounded-lg overflow-hidden">
|
||||
<div className="bg-gradient-to-br from-slate-50 to-slate-100 relative hidden lg:flex items-center justify-center">
|
||||
<Image
|
||||
src="/logo-graphic.svg"
|
||||
alt="로고"
|
||||
fill
|
||||
className="object-contain p-16"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col p-6 md:p-10 bg-white">
|
||||
<div className="flex flex-1 items-center justify-center lg:justify-start lg:pl-12">
|
||||
<div className="w-full max-w-[360px]">
|
||||
<div className="flex flex-col gap-5">
|
||||
<div className="flex flex-col items-center gap-2 text-center mb-4">
|
||||
<h1 className="text-2xl font-bold text-gray-900">로그인</h1>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
한우 유전능력 컨설팅 서비스에 오신 것을 환영합니다
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-gray-700">아이디</label>
|
||||
<Input
|
||||
placeholder="아이디를 입력하세요"
|
||||
className="h-12 text-base shadow-sm border-gray-200 focus:border-primary focus:ring-primary"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-gray-700">비밀번호</label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
type={showPassword ? "text" : "password"}
|
||||
placeholder="비밀번호를 입력하세요"
|
||||
className="h-12 text-base pr-10 shadow-sm border-gray-200 focus:border-primary focus:ring-primary"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
{showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<Button className="w-full h-12 text-base shadow-md hover:shadow-lg transition-shadow">
|
||||
로그인
|
||||
</Button>
|
||||
<div className="relative my-2">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<span className="w-full border-t border-gray-200" />
|
||||
</div>
|
||||
<div className="relative flex justify-center text-xs">
|
||||
<span className="bg-white px-3 text-gray-500">계정이 없으신가요?</span>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="outline" className="w-full h-12 text-base border-2 border-primary text-primary hover:bg-primary hover:text-white transition-colors">
|
||||
회원가입
|
||||
</Button>
|
||||
<div className="text-center text-sm text-gray-500">
|
||||
<a href="#" className="hover:text-primary transition-colors">아이디 찾기</a>
|
||||
<span className="mx-2">|</span>
|
||||
<a href="#" className="hover:text-primary transition-colors">비밀번호 찾기</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 시안 4: 현재 + 아이디 저장 + 간결한 링크
|
||||
function LoginDesign4() {
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="grid min-h-[600px] lg:grid-cols-2 border rounded-lg overflow-hidden">
|
||||
<div className="bg-white relative hidden lg:flex items-center justify-center">
|
||||
<Image
|
||||
src="/logo-graphic.svg"
|
||||
alt="로고"
|
||||
fill
|
||||
className="object-contain p-16"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col p-6 md:p-10 bg-white">
|
||||
<div className="flex flex-1 items-center justify-center lg:justify-start lg:pl-16">
|
||||
<div className="w-full max-w-[320px] lg:max-w-sm">
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col items-center gap-1 text-center mb-2">
|
||||
<h1 className="text-2xl font-bold">로그인</h1>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
한우 유전능력 컨설팅 서비스에 오신 것을 환영합니다
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">아이디</label>
|
||||
<Input placeholder="아이디를 입력하세요" className="h-11" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="text-sm font-medium">비밀번호</label>
|
||||
<a href="#" className="text-xs text-primary hover:underline">비밀번호 찾기</a>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Input
|
||||
type={showPassword ? "text" : "password"}
|
||||
placeholder="비밀번호를 입력하세요"
|
||||
className="h-11 pr-10"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
{showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input type="checkbox" className="rounded border-gray-300 text-primary focus:ring-primary" />
|
||||
<span className="text-sm text-gray-600">아이디 저장</span>
|
||||
</label>
|
||||
<Button className="w-full h-11">로그인</Button>
|
||||
<div className="relative my-2">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<span className="w-full border-t" />
|
||||
</div>
|
||||
<div className="relative flex justify-center text-xs uppercase">
|
||||
<span className="bg-white px-2 text-muted-foreground">또는</span>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="outline" className="w-full h-11 border-2 border-primary text-primary">
|
||||
회원가입
|
||||
</Button>
|
||||
<div className="text-center">
|
||||
<a href="#" className="text-sm text-gray-500 hover:text-primary">아이디를 잊으셨나요?</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 시안 5: 현재 + 컬러 강조 배경
|
||||
function LoginDesign5() {
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="grid min-h-[600px] lg:grid-cols-2 border rounded-lg overflow-hidden">
|
||||
<div className="bg-primary/5 relative hidden lg:flex items-center justify-center">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-primary/10 via-transparent to-primary/5" />
|
||||
<Image
|
||||
src="/logo-graphic.svg"
|
||||
alt="로고"
|
||||
fill
|
||||
className="object-contain p-16"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col p-6 md:p-10 bg-white">
|
||||
<div className="flex flex-1 items-center justify-center lg:justify-start lg:pl-16">
|
||||
<div className="w-full max-w-[320px] lg:max-w-sm">
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col items-center gap-1 text-center mb-2">
|
||||
<h1 className="text-2xl font-bold text-primary">로그인</h1>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
한우 유전능력 컨설팅 서비스에 오신 것을 환영합니다
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">아이디</label>
|
||||
<div className="relative">
|
||||
<User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-primary/60" />
|
||||
<Input
|
||||
placeholder="아이디를 입력하세요"
|
||||
className="pl-10 h-11 border-primary/20 focus:border-primary"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">비밀번호</label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-primary/60" />
|
||||
<Input
|
||||
type={showPassword ? "text" : "password"}
|
||||
placeholder="비밀번호를 입력하세요"
|
||||
className="pl-10 pr-10 h-11 border-primary/20 focus:border-primary"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-primary"
|
||||
>
|
||||
{showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<Button className="w-full h-11 bg-primary hover:bg-primary/90">
|
||||
<LogIn className="w-4 h-4 mr-2" />
|
||||
로그인
|
||||
</Button>
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input type="checkbox" className="rounded border-primary/30 text-primary focus:ring-primary" />
|
||||
<span className="text-gray-600">아이디 저장</span>
|
||||
</label>
|
||||
<a href="#" className="text-primary hover:underline">비밀번호 찾기</a>
|
||||
</div>
|
||||
<div className="relative my-2">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<span className="w-full border-t border-primary/20" />
|
||||
</div>
|
||||
<div className="relative flex justify-center text-xs">
|
||||
<span className="bg-white px-2 text-gray-500">계정이 없으신가요?</span>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="outline" className="w-full h-11 border-2 border-primary text-primary hover:bg-primary/5">
|
||||
회원가입
|
||||
</Button>
|
||||
<div className="text-center">
|
||||
<a href="#" className="text-sm text-gray-500 hover:text-primary">아이디 찾기</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 시안 6: 현재 + 라운드 스타일
|
||||
function LoginDesign6() {
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="grid min-h-[600px] lg:grid-cols-2 border rounded-lg overflow-hidden">
|
||||
<div className="bg-white relative hidden lg:flex items-center justify-center">
|
||||
<Image
|
||||
src="/logo-graphic.svg"
|
||||
alt="로고"
|
||||
fill
|
||||
className="object-contain p-16"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col p-6 md:p-10 bg-slate-50">
|
||||
<div className="flex flex-1 items-center justify-center lg:justify-start lg:pl-12">
|
||||
<div className="w-full max-w-[360px] bg-white p-8 rounded-2xl shadow-lg">
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col items-center gap-1 text-center mb-2">
|
||||
<h1 className="text-2xl font-bold">로그인</h1>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
한우 유전능력 컨설팅 서비스
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">아이디</label>
|
||||
<Input
|
||||
placeholder="아이디를 입력하세요"
|
||||
className="h-11 rounded-xl bg-slate-50 border-0 focus:bg-white focus:ring-2 focus:ring-primary/20"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">비밀번호</label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
type={showPassword ? "text" : "password"}
|
||||
placeholder="비밀번호를 입력하세요"
|
||||
className="h-11 pr-10 rounded-xl bg-slate-50 border-0 focus:bg-white focus:ring-2 focus:ring-primary/20"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
{showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input type="checkbox" className="rounded-md border-gray-300" />
|
||||
<span className="text-gray-600">아이디 저장</span>
|
||||
</label>
|
||||
<a href="#" className="text-primary hover:underline">비밀번호 찾기</a>
|
||||
</div>
|
||||
<Button className="w-full h-11 rounded-xl">로그인</Button>
|
||||
<Button variant="outline" className="w-full h-11 rounded-xl border-2">
|
||||
회원가입
|
||||
</Button>
|
||||
<div className="text-center">
|
||||
<a href="#" className="text-sm text-gray-500 hover:text-primary">아이디 찾기</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function AuthPagesDemo() {
|
||||
const designs = [
|
||||
{
|
||||
id: "current",
|
||||
name: "현재",
|
||||
description: "현재 적용된 디자인",
|
||||
features: ["기존 레이아웃"],
|
||||
component: LoginDesign1
|
||||
},
|
||||
{
|
||||
id: "icon",
|
||||
name: "시안 2",
|
||||
description: "아이콘 + 비밀번호 토글 추가",
|
||||
features: ["입력 필드 아이콘", "비밀번호 보기"],
|
||||
component: LoginDesign2
|
||||
},
|
||||
{
|
||||
id: "large",
|
||||
name: "시안 3",
|
||||
description: "더 큰 입력 필드 + 그림자",
|
||||
features: ["h-12 입력필드", "그림자 효과", "부드러운 배경"],
|
||||
component: LoginDesign3
|
||||
},
|
||||
{
|
||||
id: "save",
|
||||
name: "시안 4",
|
||||
description: "아이디 저장 + 간결한 링크",
|
||||
features: ["아이디 저장", "비밀번호 찾기 위치 변경"],
|
||||
component: LoginDesign4
|
||||
},
|
||||
{
|
||||
id: "color",
|
||||
name: "시안 5",
|
||||
description: "브랜드 컬러 강조",
|
||||
features: ["컬러 배경", "컬러 아이콘", "컬러 제목"],
|
||||
component: LoginDesign5
|
||||
},
|
||||
{
|
||||
id: "round",
|
||||
name: "시안 6",
|
||||
description: "라운드 카드 스타일",
|
||||
features: ["라운드 입력필드", "카드 레이아웃", "부드러운 그림자"],
|
||||
component: LoginDesign6
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-100 p-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-bold text-gray-900">로그인 페이지 디자인 시안</h1>
|
||||
<p className="text-gray-600 mt-2">
|
||||
현재 디자인 기반 개선안 - 각 탭을 클릭하여 비교해보세요
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="current" className="space-y-6">
|
||||
<TabsList className="grid grid-cols-6 w-full h-auto p-1">
|
||||
{designs.map((design) => (
|
||||
<TabsTrigger
|
||||
key={design.id}
|
||||
value={design.id}
|
||||
className="py-3 text-xs sm:text-sm data-[state=active]:bg-primary data-[state=active]:text-white"
|
||||
>
|
||||
{design.name}
|
||||
</TabsTrigger>
|
||||
))}
|
||||
</TabsList>
|
||||
|
||||
{designs.map((design) => (
|
||||
<TabsContent key={design.id} value={design.id} className="space-y-4">
|
||||
<div className="bg-white p-4 rounded-lg border">
|
||||
<div className="flex items-center justify-between flex-wrap gap-2">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold">{design.name}: {design.description}</h2>
|
||||
</div>
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
{design.features.map((feature, idx) => (
|
||||
<Badge key={idx} variant="secondary">{feature}</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white p-4 rounded-lg border">
|
||||
<design.component />
|
||||
</div>
|
||||
</TabsContent>
|
||||
))}
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user