Skip to content

Commit 4e0321e

Browse files
Victorola-coderVictorola-coder
committed
Enhance UI components in Home page with new interactive elements and layout. Added Card and Skeleton components, integrated modal and OTP input, and improved input handling. Updated component exports for better accessibility.
1 parent 4101bb5 commit 4e0321e

File tree

4 files changed

+190
-6
lines changed

4 files changed

+190
-6
lines changed

‎app/components/ui/card.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1-
export default function Card() {
2-
return <div className="bg-[#FFFFFF] rounded-[24px] p-5 animate-float"></div>;
1+
export default function Card({ children }: { children: React.ReactNode }) {
2+
return (
3+
<div className="bg-[#FFFFFF] rounded-[24px] p-5 animate-float">
4+
{children}
5+
</div>
6+
);
37
}

‎app/components/ui/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
export { default as Otp } from "./otp";
22
export { default as Tabs } from "./tabs";
3+
export { default as Card } from "./card";
34
export { default as Input } from "./input";
45
export { default as Modal } from "./modal";
56
export { default as Image } from "./image";
67
export { default as Toggle } from "./toggle";
78
export { default as Button } from "./button";
89
export { default as Select } from "./select";
10+
export { default as Skeleton } from "./skeleton";
911
export { default as TextArea } from "./textArea";

‎app/components/ui/skeleton.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import clsx from "clsx";
22

3-
export function Skeleton({
3+
export default function Skeleton({
44
className,
55
...props
66
}: React.HTMLAttributes<HTMLDivElement>) {

‎app/page.tsx

Lines changed: 181 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,185 @@
1+
"use client";
2+
3+
import { useState } from "react";
4+
import {
5+
Button,
6+
Card,
7+
Image,
8+
Input,
9+
Modal,
10+
Otp,
11+
Select,
12+
Skeleton,
13+
Tabs,
14+
TextArea,
15+
Toggle,
16+
} from "./components/ui";
17+
import { Animation, Glow } from "./components/global";
18+
119
export default function Home() {
20+
const [isModalOpen, setIsModalOpen] = useState(false);
21+
const [toggleState, setToggleState] = useState(false);
22+
const [inputValue, setInputValue] = useState("");
23+
const [textAreaValue, setTextAreaValue] = useState("");
24+
25+
const tabs = [
26+
{ label: "Overview", value: "overview" },
27+
{ label: "Components", value: "components" },
28+
{ label: "Settings", value: "settings" },
29+
];
30+
31+
const selectOptions = [
32+
{ label: "Option 1", value: "1" },
33+
{ label: "Option 2", value: "2" },
34+
{ label: "Option 3", value: "3" },
35+
];
36+
237
return (
3-
<div>
4-
<h1>Next.js Template</h1>
5-
</div>
38+
<Animation>
39+
<div className="min-h-screen bg-[#0f0f0f] p-8">
40+
<div className="max-w-6xl mx-auto space-y-12">
41+
{/* Header */}
42+
<div className="text-center space-y-4">
43+
<h1 className="text-4xl font-bold text-white">UI Components</h1>
44+
<p className="text-[#FFFFFF80]">
45+
A showcase of all available UI components
46+
</p>
47+
</div>
48+
49+
{/* Tabs Navigation */}
50+
<Tabs
51+
tabs={tabs}
52+
defaultValue="components"
53+
className="justify-center"
54+
/>
55+
56+
{/* Components Grid */}
57+
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
58+
{/* Buttons Section */}
59+
<Glow className="p-6 space-y-4">
60+
<h2 className="text-xl font-semibold text-white mb-4">Buttons</h2>
61+
<div className="space-y-4">
62+
<Button variant="default">Default Button</Button>
63+
<Button variant="primary">Primary Button</Button>
64+
<Button variant="secondary">Secondary Button</Button>
65+
<Button variant="danger">Danger Button</Button>
66+
<Button variant="google">Google Button</Button>
67+
<Button loading>Loading Button</Button>
68+
</div>
69+
</Glow>
70+
71+
{/* Form Inputs Section */}
72+
<Glow className="p-6 space-y-4">
73+
<h2 className="text-xl font-semibold text-white mb-4">Inputs</h2>
74+
<Input
75+
placeholder="Regular Input"
76+
value={inputValue}
77+
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
78+
setInputValue(e.target.value)
79+
}
80+
/>
81+
<Input
82+
type="password"
83+
placeholder="Password Input"
84+
value={inputValue}
85+
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
86+
setInputValue(e.target.value)
87+
}
88+
/>
89+
<TextArea
90+
name="textarea"
91+
value={textAreaValue}
92+
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
93+
setTextAreaValue(e.target.value)
94+
}
95+
placeholder="Text Area Input"
96+
/>
97+
</Glow>
98+
99+
{/* Toggle & Select Section */}
100+
<Glow className="p-6 space-y-4">
101+
<h2 className="text-xl font-semibold text-white mb-4">
102+
Interactive Components
103+
</h2>
104+
<div className="space-y-6">
105+
<div className="flex items-center justify-between">
106+
<span className="text-white">Toggle Component</span>
107+
<Toggle checked={toggleState} onChange={setToggleState} />
108+
</div>
109+
<Select
110+
options={selectOptions}
111+
placeholder="Select an option"
112+
onChange={(value) => console.log(value)}
113+
/>
114+
</div>
115+
</Glow>
116+
117+
{/* Card & Image Section */}
118+
<Glow className="p-6 space-y-4">
119+
<h2 className="text-xl font-semibold text-white mb-4">
120+
Display Components
121+
</h2>
122+
<Card>
123+
<div className="bg-[#283142] p-4 rounded-lg">
124+
<Image
125+
src="/placeholder.jpg"
126+
alt="Placeholder"
127+
width={300}
128+
height={200}
129+
className="rounded-lg"
130+
/>
131+
</div>
132+
</Card>
133+
</Glow>
134+
135+
{/* Loading States Section */}
136+
<Glow className="p-6 space-y-4">
137+
<h2 className="text-xl font-semibold text-white mb-4">
138+
Loading States
139+
</h2>
140+
<div className="space-y-4">
141+
<Skeleton className="h-12 w-full" />
142+
<Skeleton className="h-12 w-3/4" />
143+
<Skeleton className="h-12 w-1/2" />
144+
</div>
145+
</Glow>
146+
147+
{/* Modal & OTP Section */}
148+
<Glow className="p-6 space-y-4">
149+
<h2 className="text-xl font-semibold text-white mb-4">
150+
Advanced Components
151+
</h2>
152+
<div className="space-y-4">
153+
<Button onClick={() => setIsModalOpen(true)}>Open Modal</Button>
154+
<div className="mt-8">
155+
<h3 className="text-white mb-4">OTP Input</h3>
156+
<Otp />
157+
</div>
158+
</div>
159+
</Glow>
160+
</div>
161+
</div>
162+
163+
{/* Modal */}
164+
<Modal
165+
isOpen={isModalOpen}
166+
onClose={() => setIsModalOpen(false)}
167+
title="Modal Example"
168+
>
169+
<div className="space-y-4">
170+
<p className="text-white">
171+
This is an example modal that showcases the Modal component.
172+
</p>
173+
<Button
174+
variant="primary"
175+
onClick={() => setIsModalOpen(false)}
176+
className="w-full"
177+
>
178+
Close Modal
179+
</Button>
180+
</div>
181+
</Modal>
182+
</div>
183+
</Animation>
6184
);
7185
}

0 commit comments

Comments
 (0)