Skip to content

Commit 576471e

Browse files
harihari
authored
Fix build issues and create dedicated pages for widget, bento & button (codse#73)
1 parent 853ca43 commit 576471e

File tree

99 files changed

+2354
-1397
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

99 files changed

+2354
-1397
lines changed

‎.env.example

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
NEXT_PUBLIC_APP_URL=http://localhost:3000
12
NEXT_PUBLIC_STORYBOOK_URL=http://localhost:6006
23
NEXT_PUBLIC_SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>
34
NEXT_PUBLIC_SUPABASE_ANON_KEY=<SUBSTITUTE_SUPABASE_ANON_KEY>

‎.gitignore

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,4 +40,3 @@ next-env.d.ts
4040
*storybook.log
4141
content/docs/contributing/index.mdx
4242
public/preview
43-

‎.storybook/preview.tsx

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ addons.setConfig({
2020
theme: themes.dark,
2121
});
2222

23-
const MdxContainer = (props: any) => {
23+
const useThemeProps = (props) => {
2424
const isDark = useDarkMode();
2525
const forced = (() => {
2626
const sp = new URLSearchParams(location.search);
@@ -34,10 +34,17 @@ const MdxContainer = (props: any) => {
3434
const currentProps = { ...props };
3535
if (!forced) {
3636
currentProps.theme = isDark ? themes.dark : themes.light;
37+
currentProps.isDark = isDark;
3738
} else {
3839
currentProps.theme = forced === "theme:dark" ? themes.dark : themes.light;
40+
currentProps.isDark = forced === "theme:dark";
3941
}
4042

43+
return currentProps;
44+
};
45+
46+
const MdxContainer = (props: any) => {
47+
const currentProps = useThemeProps(props);
4148
return (
4249
<MDXProvider components={baseComponents}>
4350
<DocsContainer {...currentProps} />
@@ -49,6 +56,7 @@ const isEmbedded = window.location.href.includes("site:docs");
4956

5057
const Wrapper = ({ children }) => {
5158
const nodeRef = React.useRef(isEmbedded ? document.body : null);
59+
const theme = useThemeProps({}).isDark ? "dark" : "";
5260

5361
const callbackRef = React.useRef(() => {
5462
const height = document.querySelector(".embedded")?.clientHeight ?? 0;
@@ -73,7 +81,7 @@ const Wrapper = ({ children }) => {
7381

7482
return (
7583
<div
76-
className={isEmbedded ? "embedded" : ""}
84+
className={isEmbedded ? `embedded ${theme}`.trim() : ""}
7785
style={{ padding: isEmbedded ? 0 : "4rem 20px" }}
7886
>
7987
{children}

‎animata/background/moving-gradient.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export const Primary: Story = {
2424
<BadgeAlert />
2525
<span>Priority notifications</span>
2626
</h4>
27-
<p className="break-words text-sm text-foreground/80">
27+
<p className="break-words text-sm text-black/80">
2828
You can set up priority notifications to be alerted on your phone or
2929
computer for important emails.
3030
</p>

‎animata/bento-grid/eleven.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { cn } from "@/lib/utils";
22

3-
const BentoCard = ({
3+
function BentoCard({
44
children,
55
className,
66
}: {
77
children: React.ReactNode;
88
className?: string;
9-
}) => {
9+
}) {
1010
return (
1111
<div
1212
className={cn(
@@ -17,11 +17,11 @@ const BentoCard = ({
1717
{children}
1818
</div>
1919
);
20-
};
20+
}
2121

2222
export default function Modern() {
2323
return (
24-
<div className="box-border max-w-full p-4">
24+
<div className="box-border w-full max-w-full p-4">
2525
<div className="grid grid-cols-1 grid-rows-1 gap-2 sm:grid-cols-5 sm:grid-rows-5">
2626
<div className="sm:col-span-2 sm:row-span-2">
2727
<BentoCard className="bg-blue-300">

‎animata/bento-grid/five.tsx

Lines changed: 19 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { cn } from "@/lib/utils";
22

3-
const BentoCard = ({
3+
function BentoCard({
44
children,
55
className,
66
}: {
77
children: React.ReactNode;
88
className?: string;
9-
}) => {
9+
}) {
1010
return (
1111
<div
1212
className={cn(
@@ -17,32 +17,30 @@ const BentoCard = ({
1717
{children}
1818
</div>
1919
);
20-
};
20+
}
2121

2222
export default function Five() {
2323
return (
24-
<div className="p-4">
25-
<div className="grid grid-cols-1 gap-3 sm:grid-cols-3 sm:grid-rows-3">
26-
<BentoCard className="bg-yellow-300 sm:col-span-2">
27-
<div className="flex flex-col">Grocery List</div>
28-
</BentoCard>
24+
<div className="grid w-full min-w-[90cqw] grid-cols-1 gap-3 sm:grid-cols-3 sm:grid-rows-3">
25+
<BentoCard className="bg-yellow-300 sm:col-span-2">
26+
<div className="flex flex-col">Grocery List</div>
27+
</BentoCard>
2928

30-
<BentoCard className="bg-green-300 sm:row-span-3">
31-
<div className="flex flex-col">Meal Planner</div>
32-
</BentoCard>
29+
<BentoCard className="bg-green-300 sm:row-span-3">
30+
<div className="flex flex-col">Meal Planner</div>
31+
</BentoCard>
3332

34-
<BentoCard className="bg-red-300 sm:col-span-1 sm:row-span-2">
35-
<div className="flex flex-col">Something</div>
36-
</BentoCard>
33+
<BentoCard className="bg-red-300 sm:col-span-1 sm:row-span-2">
34+
<div className="flex flex-col">Something</div>
35+
</BentoCard>
3736

38-
<BentoCard className="bg-purple-300">
39-
<div className="flex flex-col">Another Section</div>
40-
</BentoCard>
37+
<BentoCard className="bg-purple-300">
38+
<div className="flex flex-col">Another Section</div>
39+
</BentoCard>
4140

42-
<BentoCard className="bg-zinc-300 sm:col-start-2">
43-
<div className="flex flex-col">Add Widget</div>
44-
</BentoCard>
45-
</div>
41+
<BentoCard className="bg-zinc-300 sm:col-start-2">
42+
<div className="flex flex-col">Add Widget</div>
43+
</BentoCard>
4644
</div>
4745
);
4846
}

‎animata/bento-grid/gradient.tsx

Lines changed: 89 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
} from "lucide-react";
1313
import { ReactNode } from "react";
1414

15-
const BentoCard = ({
15+
function BentoCard({
1616
title,
1717
icon,
1818
description,
@@ -26,7 +26,7 @@ const BentoCard = ({
2626
gradient?: string;
2727
description: ReactNode;
2828
className?: string;
29-
}) => {
29+
}) {
3030
return (
3131
<MovingGradient
3232
animated={false}
@@ -40,79 +40,102 @@ const BentoCard = ({
4040
<p className="text-md line-clamp-1 font-bold">{title}</p>
4141
</div>
4242
</header>
43-
<div className="flex-1 text-sm font-bold">{description}</div>
43+
<div className="flex-1 text-sm font-medium text-opacity-80">
44+
{description}
45+
</div>
4446
{children}
4547
</section>
4648
</MovingGradient>
4749
);
48-
};
50+
}
4951

50-
export default function Gradient() {
52+
function GetGradient() {
5153
return (
52-
<div className="rounded-md bg-zinc-950 p-4">
53-
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3 lg:grid-cols-3">
54-
<BentoCard
55-
title="Gradient"
56-
icon={<BarChart size={24} />}
57-
description={
58-
<span>
59-
A gradient is a smooth transition from one color to another.
60-
</span>
61-
}
62-
className="sm:col-span-1 sm:row-span-2"
63-
gradient="from-cyan-900 via-60% via-sky-600 to-indigo-600"
64-
>
65-
<div className="group relative flex cursor-pointer flex-col justify-end rounded-md bg-zinc-950 p-2 text-2xl tracking-tight text-gray-100 md:text-4xl">
66-
<div className="font-light">Get</div>
67-
<div className="-mt-2 font-bold">Gradients</div>
68-
<div className="flex h-6 w-6 items-center justify-center rounded-full border bg-white transition-all duration-700 group-hover:rotate-[360deg] md:h-8 md:w-8">
69-
<ArrowRight size={16} className="text-blue-600" />
70-
</div>
71-
<div className="absolute right-2 top-2 h-2 w-2 rounded-full bg-white opacity-50 transition-all duration-700 group-hover:opacity-25" />
72-
</div>
73-
</BentoCard>
74-
75-
<BentoCard
76-
title="Linear Gradient"
77-
icon={<GitBranch size={24} />}
78-
description="A linear gradient is a gradient that goes in a straight line."
79-
gradient="from-red-300 via-60% via-rose-300 to-red-200"
80-
className="group sm:col-span-1"
81-
>
82-
<div className="h-4 w-full rounded-sm bg-gray-100 group-hover:animate-pulse group-hover:bg-gray-300" />
83-
<div className="h-4 w-1/2 rounded-sm bg-gray-100 group-hover:animate-pulse group-hover:bg-gray-300" />
84-
</BentoCard>
54+
<BentoCard
55+
title="Gradient"
56+
icon={<BarChart size={24} />}
57+
description={
58+
<span>
59+
A gradient is a smooth transition from one color to another.
60+
</span>
61+
}
62+
className="sm:col-span-1 sm:row-span-2"
63+
gradient="from-cyan-900 via-60% via-sky-600 to-indigo-600"
64+
>
65+
<div className="group relative flex cursor-pointer flex-col justify-end rounded-md bg-zinc-950 p-2 text-2xl tracking-tight text-gray-100 md:text-4xl">
66+
<div className="font-light">Get</div>
67+
<div className="-mt-2 font-bold">Gradients</div>
68+
<div className="flex h-6 w-6 items-center justify-center rounded-full border bg-white transition-all duration-700 group-hover:rotate-[360deg] md:h-8 md:w-8">
69+
<ArrowRight size={16} className="text-blue-600" />
70+
</div>
71+
<div className="absolute right-2 top-2 h-2 w-2 rounded-full bg-white opacity-50 transition-all duration-700 group-hover:opacity-25" />
72+
</div>
73+
</BentoCard>
74+
);
75+
}
8576

86-
<BentoCard
87-
title="Radial Gradient"
88-
icon={<LineChart size={24} />}
89-
description="A radial gradient is a gradient that goes in a circular direction."
90-
gradient="from-lime-300 via-60% via-green-200 to-lime-200"
91-
className="group sm:col-span-1"
92-
>
93-
<div className="flex w-full flex-row justify-end gap-2 rounded border-yellow-200 bg-yellow-100 p-2">
94-
<HeartPulse
95-
size={16}
96-
className="delay-150 duration-75 group-hover:animate-in group-hover:slide-in-from-right-full"
97-
/>
98-
<Sun
99-
size={16}
100-
className="delay-75 duration-75 group-hover:animate-in group-hover:slide-in-from-right-full"
101-
/>
102-
<BookPlus
103-
size={16}
104-
className="duration-75 group-hover:animate-in group-hover:slide-in-from-right-full"
105-
/>
106-
</div>
107-
</BentoCard>
77+
function LinearGradient() {
78+
return (
79+
<BentoCard
80+
title="Linear Gradient"
81+
icon={<GitBranch size={24} />}
82+
description="A linear gradient is a gradient that goes in a straight line."
83+
gradient="from-red-300 via-60% via-rose-300 to-red-200"
84+
className="group sm:col-span-1"
85+
>
86+
<div className="h-4 w-full rounded-sm bg-gray-100 group-hover:animate-pulse group-hover:bg-gray-300" />
87+
<div className="h-4 w-1/2 rounded-sm bg-gray-100 group-hover:animate-pulse group-hover:bg-gray-300" />
88+
</BentoCard>
89+
);
90+
}
10891

109-
<BentoCard
110-
title="Conic Gradient"
111-
icon={<TypeIcon size={24} />}
112-
description="A conic gradient is a gradient that goes in a circular direction."
113-
gradient="from-cyan-900 via-60% via-sky-600 to-indigo-600"
114-
className="sm:col-span-2"
92+
function RadialGradient() {
93+
return (
94+
<BentoCard
95+
title="Radial Gradient"
96+
icon={<LineChart size={24} />}
97+
description="A radial gradient is a gradient that goes in a circular direction."
98+
gradient="from-lime-300 via-60% via-green-200 to-lime-200"
99+
className="group sm:col-span-1"
100+
>
101+
<div className="flex w-full flex-row justify-end gap-2 rounded border-yellow-200 bg-yellow-100 p-2">
102+
<HeartPulse
103+
size={16}
104+
className="delay-150 duration-75 group-hover:animate-in group-hover:slide-in-from-right-full"
105+
/>
106+
<Sun
107+
size={16}
108+
className="delay-75 duration-75 group-hover:animate-in group-hover:slide-in-from-right-full"
115109
/>
110+
<BookPlus
111+
size={16}
112+
className="duration-75 group-hover:animate-in group-hover:slide-in-from-right-full"
113+
/>
114+
</div>
115+
</BentoCard>
116+
);
117+
}
118+
119+
function ConicGradient() {
120+
return (
121+
<BentoCard
122+
title="Conic Gradient"
123+
icon={<TypeIcon size={24} />}
124+
description="A conic gradient is a gradient that goes in a circular direction."
125+
gradient="from-cyan-900 via-60% via-sky-600 to-indigo-600"
126+
className="sm:col-span-2"
127+
/>
128+
);
129+
}
130+
131+
export default function Gradient() {
132+
return (
133+
<div className="bg-zinc-950 p-4">
134+
<div className="grid grid-cols-1 gap-4 text-black sm:grid-cols-3 lg:grid-cols-3">
135+
<GetGradient />
136+
<LinearGradient />
137+
<RadialGradient />
138+
<ConicGradient />
116139
</div>
117140
</div>
118141
);

0 commit comments

Comments
 (0)