Skip to content

Commit f627fca

Browse files
AnsubAnsub
committed
🧹 code refactor + ui changes
1 parent a53710e commit f627fca

File tree

11 files changed

+1730
-320
lines changed

11 files changed

+1730
-320
lines changed

‎package-lock.json‎

Lines changed: 1235 additions & 95 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@
1616
"@mdx-js/loader": "^3.0.0",
1717
"@mdx-js/react": "^3.0.0",
1818
"@next/mdx": "^14.0.4",
19+
"@radix-ui/react-popover": "^1.1.1",
20+
"@radix-ui/react-select": "^2.1.1",
1921
"@radix-ui/react-slot": "^1.0.2",
2022
"@radix-ui/react-tooltip": "^1.0.7",
2123
"@sindresorhus/slugify": "^2.1.1",

‎src/app/(docs)/components/button/3d-button/page.mdx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
export const metadata = {
22
title: '3D Button',
3-
description: 'A button with a stunning 3D effect. When clicked, it gives a satisfying press sensation. Seamlessly integrate this interactive button into your React and Next.js projects using Tailwind CSS.',
3+
description:
4+
'A button with a stunning 3D effect. When clicked, it gives a satisfying press sensation. Seamlessly integrate this interactive button into your React and Next.js projects using Tailwind CSS.',
45
}
56

67
<BackButton href="/components/button" />
78

8-
<ComponentPreview path="components/button/3DButton" />
9+
<ComponentPreview path="components/button/3DButton" />

‎src/app/(docs)/effects/gradients/page.mdx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
import GradientCards from '@/showcase/effects/gradients/GradientCards'
2-
import CustomGradientGenerator
3-
from '@/showcase/effects/gradients/CustomGradientGenerator'
2+
import CustomGradientGenerator from '@/showcase/effects/gradients/CustomGradientGenerator'
43
export const metadata = {
54
title: 'Gradients',
6-
description: 'A gradient is a color that is applied to an object to create a visual effect.',
5+
description:
6+
'A gradient is a color that is applied to an object to create a visual effect.',
77
}
88

99
# Gradients
1010

11-
Beautiful Tailwind CSS gradients for your next project.
11+
<div className="my-4"></div>
12+
<div className="text-sm font-medium">Gradient Generator</div>
13+
<CustomGradientGenerator />
1214

1315
<div className="my-4"></div>
14-
<CustomGradientGenerator/>
15-
<GradientCards />
16+
<div className="mb-4 text-sm font-medium">Gradient Presets</div>
17+
<GradientCards />

‎src/components/ui/card.tsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import * as React from "react"
2+
3+
import { cn } from "@/lib/utils"
4+
5+
const Card = React.forwardRef<
6+
HTMLDivElement,
7+
React.HTMLAttributes<HTMLDivElement>
8+
>(({ className, ...props }, ref) => (
9+
<div
10+
ref={ref}
11+
className={cn(
12+
"rounded-lg border border-neutral-200 bg-white text-neutral-950 shadow-sm dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
13+
className
14+
)}
15+
{...props}
16+
/>
17+
))
18+
Card.displayName = "Card"
19+
20+
const CardHeader = React.forwardRef<
21+
HTMLDivElement,
22+
React.HTMLAttributes<HTMLDivElement>
23+
>(({ className, ...props }, ref) => (
24+
<div
25+
ref={ref}
26+
className={cn("flex flex-col space-y-1.5 p-6", className)}
27+
{...props}
28+
/>
29+
))
30+
CardHeader.displayName = "CardHeader"
31+
32+
const CardTitle = React.forwardRef<
33+
HTMLParagraphElement,
34+
React.HTMLAttributes<HTMLHeadingElement>
35+
>(({ className, ...props }, ref) => (
36+
<h3
37+
ref={ref}
38+
className={cn(
39+
"text-2xl font-semibold leading-none tracking-tight",
40+
className
41+
)}
42+
{...props}
43+
/>
44+
))
45+
CardTitle.displayName = "CardTitle"
46+
47+
const CardDescription = React.forwardRef<
48+
HTMLParagraphElement,
49+
React.HTMLAttributes<HTMLParagraphElement>
50+
>(({ className, ...props }, ref) => (
51+
<p
52+
ref={ref}
53+
className={cn("text-sm text-neutral-500 dark:text-neutral-400", className)}
54+
{...props}
55+
/>
56+
))
57+
CardDescription.displayName = "CardDescription"
58+
59+
const CardContent = React.forwardRef<
60+
HTMLDivElement,
61+
React.HTMLAttributes<HTMLDivElement>
62+
>(({ className, ...props }, ref) => (
63+
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
64+
))
65+
CardContent.displayName = "CardContent"
66+
67+
const CardFooter = React.forwardRef<
68+
HTMLDivElement,
69+
React.HTMLAttributes<HTMLDivElement>
70+
>(({ className, ...props }, ref) => (
71+
<div
72+
ref={ref}
73+
className={cn("flex items-center p-6 pt-0", className)}
74+
{...props}
75+
/>
76+
))
77+
CardFooter.displayName = "CardFooter"
78+
79+
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

‎src/components/ui/popover.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
"use client"
2+
3+
import * as React from "react"
4+
import * as PopoverPrimitive from "@radix-ui/react-popover"
5+
6+
import { cn } from "@/lib/utils"
7+
8+
const Popover = PopoverPrimitive.Root
9+
10+
const PopoverTrigger = PopoverPrimitive.Trigger
11+
12+
const PopoverContent = React.forwardRef<
13+
React.ElementRef<typeof PopoverPrimitive.Content>,
14+
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
15+
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
16+
<PopoverPrimitive.Portal>
17+
<PopoverPrimitive.Content
18+
ref={ref}
19+
align={align}
20+
sideOffset={sideOffset}
21+
className={cn(
22+
"z-50 w-72 rounded-md border border-neutral-200 bg-white p-4 text-neutral-950 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
23+
className
24+
)}
25+
{...props}
26+
/>
27+
</PopoverPrimitive.Portal>
28+
))
29+
PopoverContent.displayName = PopoverPrimitive.Content.displayName
30+
31+
export { Popover, PopoverTrigger, PopoverContent }

‎src/components/ui/select.tsx‎

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
"use client"
2+
3+
import * as React from "react"
4+
import * as SelectPrimitive from "@radix-ui/react-select"
5+
import { Check, ChevronDown, ChevronUp } from "lucide-react"
6+
7+
import { cn } from "@/lib/utils"
8+
9+
const Select = SelectPrimitive.Root
10+
11+
const SelectGroup = SelectPrimitive.Group
12+
13+
const SelectValue = SelectPrimitive.Value
14+
15+
const SelectTrigger = React.forwardRef<
16+
React.ElementRef<typeof SelectPrimitive.Trigger>,
17+
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
18+
>(({ className, children, ...props }, ref) => (
19+
<SelectPrimitive.Trigger
20+
ref={ref}
21+
className={cn(
22+
"flex h-10 w-full items-center justify-between rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 dark:border-neutral-800 dark:bg-neutral-950 dark:ring-offset-neutral-950 dark:placeholder:text-neutral-400 dark:focus:ring-neutral-300",
23+
className
24+
)}
25+
{...props}
26+
>
27+
{children}
28+
<SelectPrimitive.Icon asChild>
29+
<ChevronDown className="h-4 w-4 opacity-50" />
30+
</SelectPrimitive.Icon>
31+
</SelectPrimitive.Trigger>
32+
))
33+
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
34+
35+
const SelectScrollUpButton = React.forwardRef<
36+
React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
37+
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
38+
>(({ className, ...props }, ref) => (
39+
<SelectPrimitive.ScrollUpButton
40+
ref={ref}
41+
className={cn(
42+
"flex cursor-default items-center justify-center py-1",
43+
className
44+
)}
45+
{...props}
46+
>
47+
<ChevronUp className="h-4 w-4" />
48+
</SelectPrimitive.ScrollUpButton>
49+
))
50+
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
51+
52+
const SelectScrollDownButton = React.forwardRef<
53+
React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
54+
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
55+
>(({ className, ...props }, ref) => (
56+
<SelectPrimitive.ScrollDownButton
57+
ref={ref}
58+
className={cn(
59+
"flex cursor-default items-center justify-center py-1",
60+
className
61+
)}
62+
{...props}
63+
>
64+
<ChevronDown className="h-4 w-4" />
65+
</SelectPrimitive.ScrollDownButton>
66+
))
67+
SelectScrollDownButton.displayName =
68+
SelectPrimitive.ScrollDownButton.displayName
69+
70+
const SelectContent = React.forwardRef<
71+
React.ElementRef<typeof SelectPrimitive.Content>,
72+
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
73+
>(({ className, children, position = "popper", ...props }, ref) => (
74+
<SelectPrimitive.Portal>
75+
<SelectPrimitive.Content
76+
ref={ref}
77+
className={cn(
78+
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white text-neutral-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
79+
position === "popper" &&
80+
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
81+
className
82+
)}
83+
position={position}
84+
{...props}
85+
>
86+
<SelectScrollUpButton />
87+
<SelectPrimitive.Viewport
88+
className={cn(
89+
"p-1",
90+
position === "popper" &&
91+
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
92+
)}
93+
>
94+
{children}
95+
</SelectPrimitive.Viewport>
96+
<SelectScrollDownButton />
97+
</SelectPrimitive.Content>
98+
</SelectPrimitive.Portal>
99+
))
100+
SelectContent.displayName = SelectPrimitive.Content.displayName
101+
102+
const SelectLabel = React.forwardRef<
103+
React.ElementRef<typeof SelectPrimitive.Label>,
104+
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
105+
>(({ className, ...props }, ref) => (
106+
<SelectPrimitive.Label
107+
ref={ref}
108+
className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
109+
{...props}
110+
/>
111+
))
112+
SelectLabel.displayName = SelectPrimitive.Label.displayName
113+
114+
const SelectItem = React.forwardRef<
115+
React.ElementRef<typeof SelectPrimitive.Item>,
116+
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
117+
>(({ className, children, ...props }, ref) => (
118+
<SelectPrimitive.Item
119+
ref={ref}
120+
className={cn(
121+
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
122+
className
123+
)}
124+
{...props}
125+
>
126+
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
127+
<SelectPrimitive.ItemIndicator>
128+
<Check className="h-4 w-4" />
129+
</SelectPrimitive.ItemIndicator>
130+
</span>
131+
132+
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
133+
</SelectPrimitive.Item>
134+
))
135+
SelectItem.displayName = SelectPrimitive.Item.displayName
136+
137+
const SelectSeparator = React.forwardRef<
138+
React.ElementRef<typeof SelectPrimitive.Separator>,
139+
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
140+
>(({ className, ...props }, ref) => (
141+
<SelectPrimitive.Separator
142+
ref={ref}
143+
className={cn("-mx-1 my-1 h-px bg-neutral-100 dark:bg-neutral-800", className)}
144+
{...props}
145+
/>
146+
))
147+
SelectSeparator.displayName = SelectPrimitive.Separator.displayName
148+
149+
export {
150+
Select,
151+
SelectGroup,
152+
SelectValue,
153+
SelectTrigger,
154+
SelectContent,
155+
SelectLabel,
156+
SelectItem,
157+
SelectSeparator,
158+
SelectScrollUpButton,
159+
SelectScrollDownButton,
160+
}

‎src/lib/convertToTailwind.ts‎

Lines changed: 0 additions & 20 deletions
This file was deleted.

‎src/lib/convertToVanillaCssGradient.ts‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎src/lib/gradients.ts‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
export function generateTailwindGradient({
2+
shape,
3+
direction,
4+
from,
5+
via,
6+
to,
7+
}: {
8+
shape: string
9+
direction: string
10+
from: string
11+
via?: string
12+
to: string
13+
}): string {
14+
const formattedDirection = direction.replace(/\s+/g, '_')
15+
const viaClass = via ? `via-[${via}]` : ''
16+
return `bg-[radial-gradient(${shape}_at_${formattedDirection},_var(--tw-gradient-stops))] from-[${from}] ${viaClass} to-[${to}]`
17+
}
18+
19+
export function generateCssGradient({
20+
shape,
21+
position,
22+
fromColor,
23+
viaColor,
24+
toColor,
25+
}: {
26+
shape: string
27+
position: string
28+
fromColor: string
29+
viaColor?: string
30+
toColor: string
31+
}): string {
32+
const gradientStops = viaColor
33+
? `${fromColor}, ${viaColor}, ${toColor}`
34+
: `${fromColor}, ${toColor}`
35+
return `radial-gradient(${shape} at ${position}, ${gradientStops})`
36+
}

0 commit comments

Comments
 (0)