Skip to content

Commit c66a78e

Browse files
code-envcode-env
committed
feat: add ImageCarousel component and define COMPONENTS constant for animated components
1 parent a94d61c commit c66a78e

File tree

4 files changed

+278
-207
lines changed

4 files changed

+278
-207
lines changed

‎src/components/animations/carousel.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ import { AnimatePresence, motion, useMotionValue } from "motion/react";
66
import { useState } from "react";
77

88
const ImageCarousel: React.FC<{
9-
images: string[];
109
className?: string;
11-
}> = ({ images, className }) => {
10+
}> = ({ className }) => {
11+
const images = ["/succession.jpeg", "/mirror.jpeg", "/dune.jpg"];
1212
const [imgIndex, setImgIndex] = useState(0);
1313

1414
const dragX = useMotionValue(0);
@@ -27,7 +27,7 @@ const ImageCarousel: React.FC<{
2727
<div
2828
className={cn(
2929
"group/hover relative aspect-square size-96 overflow-hidden rounded-lg",
30-
className,
30+
className
3131
)}
3232
>
3333
<div className="pointer-events-none absolute top-1/2 z-10 flex w-full -translate-y-1/2 justify-between px-5 ">

‎src/constants/components.ts

Lines changed: 263 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,263 @@
1+
import * as Animated from "@/components/animations";
2+
3+
export const COMPONENTS = [
4+
{
5+
name: "ModeToggle",
6+
component: Animated.ModeToggle,
7+
href: "https://x.com/jakubkrehel/status/1911816000107901308",
8+
},
9+
{
10+
name: "Volume",
11+
component: Animated.Volume,
12+
href: "",
13+
notReady: true,
14+
},
15+
{
16+
name: "Map",
17+
component: Animated.Map,
18+
href: "",
19+
notReady: true,
20+
},
21+
{
22+
name: "View",
23+
component: Animated.View,
24+
href: "https://x.com/gobennovela/status/1902773494158406036",
25+
},
26+
{
27+
name: "Plan",
28+
component: Animated.Plan,
29+
href: "https://x.com/KumailNanji/status/1904512842684145854",
30+
},
31+
{
32+
name: "TodoList",
33+
component: Animated.TodoList,
34+
href: "https://x.com/raunofreiberg/status/1578344374055751680",
35+
},
36+
{
37+
name: "DynamicStatusButton",
38+
component: Animated.DynamicStatusButton,
39+
href: "https://x.com/lochieaxon/status/1700192743576973633",
40+
},
41+
{
42+
name: "FluidButton",
43+
component: Animated.FluidButton,
44+
href: "https://x.com/nonzeroexitcode/status/1883605350701826090",
45+
},
46+
{
47+
name: "DotMatrixClock",
48+
component: Animated.DotMatrixClock,
49+
href: "https://showcase.saran13raj.com/desk-clock",
50+
},
51+
{
52+
name: "StackClick",
53+
component: Animated.StackClick,
54+
href: "",
55+
notReady: true,
56+
},
57+
{
58+
name: "FigmaLayout",
59+
component: Animated.FigmaLayout,
60+
href: "",
61+
notReady: true,
62+
},
63+
{
64+
name: "ProfileEdit",
65+
component: Animated.ProfileEdit,
66+
href: "",
67+
notReady: true,
68+
},
69+
{
70+
name: "Uploader",
71+
component: Animated.Uploader,
72+
href: "",
73+
notReady: true,
74+
},
75+
{
76+
name: "UserStacked",
77+
component: Animated.UserStacked,
78+
href: "https://x.com/joebell_/status/1892549833946226770",
79+
},
80+
{
81+
name: "ClickSelect",
82+
component: Animated.ClickSelect,
83+
href: "https://x.com/KumailNanji/status/1856692491702902929",
84+
},
85+
{
86+
name: "UserSearch",
87+
component: Animated.UserSearch,
88+
href: "",
89+
notReady: true,
90+
},
91+
{
92+
name: "InputShotcut",
93+
component: Animated.InputShotcut,
94+
href: "https://x.com/raunofreiberg/status/1848279346785488939",
95+
},
96+
{
97+
name: "WordRoll",
98+
component: Animated.WordRoll,
99+
href: "https://x.com/bollmann0x/status/1892963996174581913",
100+
},
101+
{
102+
name: "Cursor",
103+
component: Animated.Cursor,
104+
href: "",
105+
notReady: true,
106+
},
107+
{
108+
name: "MusicSheet",
109+
component: Animated.MusicSheet,
110+
href: "",
111+
notReady: true,
112+
height: 200,
113+
},
114+
{
115+
name: "LiveBlogs",
116+
component: Animated.LiveBlogs,
117+
href: "",
118+
notReady: true,
119+
},
120+
{
121+
name: "InputCheck",
122+
component: Animated.InputCheck,
123+
href: "https://x.com/victorwelander_/status/1889364334561648988",
124+
},
125+
{
126+
name: "AnimatedCounter",
127+
component: Animated.AnimatedCounter,
128+
href: "",
129+
},
130+
{
131+
name: "YearsTabs",
132+
component: Animated.YearsTabs,
133+
href: "https://x.com/nonzeroexitcode/status/1883120034131943830",
134+
height: 15,
135+
},
136+
{
137+
name: "JoiDownloadButton",
138+
component: Animated.JoiDownloadButton,
139+
href: "https://joi.software/",
140+
},
141+
{
142+
name: "LinearTab",
143+
component: Animated.LinearTab,
144+
href: "https://linear.app",
145+
},
146+
{
147+
name: "TabBars",
148+
component: Animated.TabBars,
149+
href: "",
150+
},
151+
{
152+
name: "PeerListBar",
153+
component: Animated.PeerListBar,
154+
href: "https://peerlist.io/scroll",
155+
},
156+
{
157+
name: "NewHero",
158+
component: Animated.NewHero,
159+
href: "https://ground.bossadizenith.me/",
160+
},
161+
{
162+
name: "MagneticLines",
163+
component: Animated.MagneticLines,
164+
href: "",
165+
},
166+
{
167+
name: "PromptBox",
168+
component: Animated.PromptBox,
169+
href: "",
170+
notReady: true,
171+
},
172+
{
173+
name: "DropdownNav",
174+
component: Animated.DropdownNav,
175+
href: "",
176+
notReady: true,
177+
},
178+
{
179+
name: "AnimatedFeedback",
180+
component: Animated.AnimatedFeedback,
181+
href: "https://x.com/emilkowalski_/status/1782392557692948747",
182+
},
183+
{
184+
name: "AmieAction",
185+
component: Animated.AmieAction,
186+
href: "https://x.com/Ibelick",
187+
},
188+
{
189+
name: "Fellaz",
190+
component: Animated.Fellaz,
191+
href: "https://x.com/jakubkrehel/status/1797712038019633362",
192+
},
193+
{
194+
name: "MovieGallery",
195+
component: Animated.MovieGallery,
196+
href: "https://x.com/jakubkrehel",
197+
},
198+
{
199+
name: "Wants",
200+
component: Animated.Wants,
201+
href: "https://x.com/nitishkmrk/status/1866733655227605156",
202+
},
203+
{
204+
name: "Wheel",
205+
component: Animated.Wheel,
206+
href: "https://x.com/nitishkmrk/status/1816724129619558518",
207+
},
208+
{
209+
name: "Counter",
210+
component: Animated.Counter,
211+
href: "https://x.com/nitishkmrk/status/1804132896766308587",
212+
},
213+
{
214+
name: "Bolt",
215+
component: Animated.Bolt,
216+
href: "https://www.aceternity.com/",
217+
},
218+
{
219+
name: "Cashflow",
220+
component: Animated.Cashflow,
221+
href: "https://x.com/KumailNanji/status/1857125863210225865",
222+
height: 200,
223+
},
224+
{
225+
name: "Typer",
226+
component: Animated.Typer,
227+
href: "",
228+
},
229+
{
230+
name: "SearchUser",
231+
component: Animated.SearchUser,
232+
href: "",
233+
},
234+
{
235+
name: "ImageCarousel",
236+
component: Animated.ImageCarousel,
237+
href: "",
238+
notReady: true,
239+
},
240+
{
241+
name: "Slider",
242+
component: Animated.Slider,
243+
href: "https://x.com/60fpsdesign/status/1820813051538333889",
244+
},
245+
{
246+
name: "DynamicIsland",
247+
component: Animated.DynamicIsland,
248+
href: "",
249+
notReady: true,
250+
height: 200,
251+
},
252+
{
253+
name: "SignIn",
254+
component: Animated.SignIn,
255+
href: "https://x.com/nitishkmrk/status/1780849995635474492",
256+
},
257+
{
258+
name: "TelegramInput",
259+
component: Animated.TelegramInput,
260+
href: "",
261+
notReady: true,
262+
},
263+
];

‎src/index.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@
8686
}
8787

8888
.full {
89-
@apply size-full rounded-xl bg-background;
89+
@apply size-full bg-background;
9090
}
9191

9292
.center {

0 commit comments

Comments
 (0)