Skip to content

Commit 7a66eec

Browse files
KevinGrajedaKevinGrajeda
committed
add favicon, og, usage
1 parent 7b03915 commit 7a66eec

File tree

12 files changed

+341
-78
lines changed

12 files changed

+341
-78
lines changed

‎web/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
},
1111
"dependencies": {
1212
"@radix-ui/react-select": "^2.1.1",
13+
"@radix-ui/react-slot": "^1.1.0",
1314
"class-variance-authority": "^0.7.0",
1415
"clsx": "^2.1.1",
1516
"lucide-react": "^0.427.0",

‎web/pnpm-lock.yaml‎

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

‎web/public/spring.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎web/src/app/SpringEditor.tsx‎

Lines changed: 85 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -10,82 +10,101 @@ import {
1010
import { useState } from "react";
1111
import theme from "../../../src/theme";
1212
import { cn } from "@/lib/utils";
13+
import CopyButton from "@/components/CopyButton";
1314

1415
export default function SpringEditor() {
1516
const [bounce, setBounce] = useState("60");
1617
const [perceptualDuration, setPerceptualDuration] = useState("300");
1718

1819
return (
19-
<article className="flex flex-col justify-evenly gap-10 py-10 sm:flex-row">
20-
<div className="flex flex-1 flex-col items-center justify-center gap-6 font-mono text-xl sm:items-end">
21-
<div className="flex">
22-
<label className="">spring-bounce-</label>
20+
<>
21+
<article className="item flex flex-col gap-9 py-10 sm:flex-row sm:gap-0">
22+
<div className="flex flex-1 flex-col items-center justify-center gap-4 font-mono text-xl sm:items-end">
23+
<div className="flex">
24+
<label htmlFor="spring-bounce-">spring-bounce-</label>
2325

24-
<Select value={bounce} onValueChange={setBounce}>
25-
<SelectTrigger className="h-8 w-[7ch] p-0 px-1 text-xl">
26-
<SelectValue placeholder="Select a fruit" />
27-
</SelectTrigger>
28-
<SelectContent>
29-
<SelectGroup>
30-
{Object.entries(theme.bounceValues).map(([key]) => (
31-
<SelectItem
32-
className="font-mono text-base"
33-
key={key}
34-
value={key}
35-
>
36-
{key}
37-
</SelectItem>
38-
))}
39-
</SelectGroup>
40-
</SelectContent>
41-
</Select>
26+
<Select value={bounce} onValueChange={setBounce}>
27+
<SelectTrigger
28+
id="spring-bounce-"
29+
className="h-8 w-[7ch] p-0 px-1 text-xl"
30+
>
31+
<SelectValue />
32+
</SelectTrigger>
33+
<SelectContent>
34+
<SelectGroup>
35+
{Object.entries(theme.bounceValues).map(([key]) => (
36+
<SelectItem
37+
className="py-1 font-mono text-base"
38+
key={key}
39+
value={key}
40+
>
41+
{key}
42+
</SelectItem>
43+
))}
44+
</SelectGroup>
45+
</SelectContent>
46+
</Select>
47+
</div>
48+
<div className="flex">
49+
<label htmlFor="spring-duration">spring-duration-</label>
50+
<Select
51+
value={perceptualDuration}
52+
onValueChange={setPerceptualDuration}
53+
>
54+
<SelectTrigger
55+
id="spring-duration"
56+
className="h-8 w-[7ch] p-0 px-1 text-xl"
57+
>
58+
<SelectValue />
59+
</SelectTrigger>
60+
<SelectContent>
61+
<SelectGroup>
62+
{Object.entries(theme.perceptualDurationValues).map(
63+
([key]) => (
64+
<SelectItem
65+
className="py-1 font-mono text-base"
66+
key={key}
67+
value={key}
68+
>
69+
{key}
70+
</SelectItem>
71+
),
72+
)}
73+
</SelectGroup>
74+
</SelectContent>
75+
</Select>
76+
</div>
4277
</div>
43-
<div className="flex">
44-
<label htmlFor="spring-perceptual-duration">spring-duration-</label>
45-
<Select
46-
value={perceptualDuration}
47-
onValueChange={setPerceptualDuration}
78+
<div className="flex flex-1 flex-col items-center justify-center">
79+
<button
80+
className={cn(
81+
"hidden aspect-square w-24 cursor-pointer items-center justify-center rounded-md bg-red-500 text-white transition-transform hover:scale-150 active:scale-90 sm:flex",
82+
`spring-bounce-${bounce}`,
83+
`spring-duration-${perceptualDuration}`,
84+
)}
4885
>
49-
<SelectTrigger className="h-8 w-[7ch] p-0 px-1 text-xl">
50-
<SelectValue placeholder="Select a fruit" />
51-
</SelectTrigger>
52-
<SelectContent>
53-
<SelectGroup>
54-
{Object.entries(theme.perceptualDurationValues).map(([key]) => (
55-
<SelectItem
56-
className="font-mono text-base"
57-
key={key}
58-
value={key}
59-
>
60-
{key}
61-
</SelectItem>
62-
))}
63-
</SelectGroup>
64-
</SelectContent>
65-
</Select>
86+
Hover me
87+
</button>
88+
<label
89+
className={cn(
90+
"flex aspect-square w-24 cursor-pointer items-center justify-center rounded-md bg-red-500 text-white transition-transform has-[:checked]:scale-150 sm:hidden",
91+
`spring-bounce-${bounce}`,
92+
`spring-duration-${perceptualDuration}`,
93+
)}
94+
>
95+
Touch me
96+
<input type="checkbox" className="hidden" />
97+
</label>
6698
</div>
99+
</article>
100+
<div className="flex justify-center">
101+
<code className="overflow-x-auto text-nowrap rounded bg-muted p-3 pr-4 text-base">
102+
<CopyButton
103+
text={`spring-bounce-${bounce} spring-duration-${perceptualDuration}`}
104+
/>
105+
{`spring-bounce-${bounce} spring-duration-${perceptualDuration}`}
106+
</code>
67107
</div>
68-
<div className="flex flex-1 items-center justify-center">
69-
<button
70-
className={cn(
71-
"hidden aspect-square w-24 cursor-pointer items-center justify-center rounded-md bg-red-500 text-white transition-transform hover:scale-150 active:scale-90 sm:flex",
72-
`spring-bounce-${bounce}`,
73-
`spring-duration-${perceptualDuration}`,
74-
)}
75-
>
76-
Hover me
77-
</button>
78-
<label
79-
className={cn(
80-
"flex aspect-square w-24 cursor-pointer items-center justify-center rounded-md bg-red-500 text-white transition-transform has-[:checked]:scale-150 sm:hidden",
81-
`spring-bounce-${bounce}`,
82-
`spring-duration-${perceptualDuration}`,
83-
)}
84-
>
85-
Touch me
86-
<input type="checkbox" className="hidden" />
87-
</label>
88-
</div>
89-
</article>
108+
</>
90109
);
91110
}

‎web/src/app/favicon-16x16.png‎

843 Bytes
Loading

‎web/src/app/favicon-32x32.png‎

1.42 KB
Loading

‎web/src/app/layout.tsx‎

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,28 @@ import { cn } from "@/lib/utils";
77
const inter = Inter({ subsets: ["latin"] });
88

99
export const metadata: Metadata = {
10-
title: "TODO",
11-
description: "TODO",
10+
title: "tailwindcss-spring",
11+
description:
12+
"A Tailwind CSS plugin that adds spring animations to your project using CSS linear(). Define just two parameters and let the plugin generate the easing curve and the animation duration.",
13+
keywords: [
14+
"tailwindcss",
15+
"tailwind",
16+
"spring",
17+
"animation",
18+
"plugin",
19+
"bounce",
20+
"linear()",
21+
"easing",
22+
"curve",
23+
"CSS",
24+
],
25+
twitter: {
26+
title: "tailwindcss-spring",
27+
description:
28+
"A Tailwind CSS plugin that adds spring animations to your project using CSS linear(). Define just two parameters and let the plugin generate the easing curve and the animation duration.",
29+
card: "summary_large_image",
30+
},
31+
authors: [{ name: "Kevin Grajeda", url: "https://x.com/k_grajeda" }],
1232
};
1333

1434
export default function RootLayout({

0 commit comments

Comments
 (0)