Skip to content

Commit 490d06b

Browse files
TheOrcDevTheOrcDev
authored
feat(calendar) add calendar block with examples and update button styles (#227)
1 parent d64f41c commit 490d06b

File tree

11 files changed

+191
-58
lines changed

11 files changed

+191
-58
lines changed

‎app/blocks/authentication/page.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,17 @@ export default function BlocksPage() {
2222
all React frameworks. Open Source. Free forever.
2323
</p>
2424

25-
<div className="flex gap-5">
26-
<Link href="/blocks/authentication">
27-
<Button>Authentication</Button>
28-
</Link>
29-
<Link href="/blocks/charts">
30-
<Button>Charts</Button>
31-
</Link>
25+
<div className="flex flex-col md:flex-row gap-5">
26+
<Button variant="outline" asChild>
27+
<Link href="/blocks/authentication">Authentication</Link>
28+
</Button>
29+
30+
<Button asChild>
31+
<Link href="/blocks/charts">Charts</Link>
32+
</Button>
33+
<Button asChild>
34+
<Link href="/blocks/calendar">Calendar</Link>
35+
</Button>
3236
</div>
3337

3438
<AuthenticationBlocks />

‎app/blocks/calendar/calendar.tsx‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import type { Metadata } from "next";
2+
3+
import { calendarMetaData } from "@/lib/metadata";
4+
5+
import { CalendarExample } from "@/components/examples/calendar";
6+
import { Calendar13 } from "@/components/examples/calendars/calendar-13";
7+
import { RangeCalendar } from "@/components/examples/range-calendar";
8+
9+
import CopyCommandButton from "@/app/docs/components/copy-command-button";
10+
import { OpenInV0Button } from "@/app/docs/components/open-in-v0-button";
11+
12+
export const metadata: Metadata = {
13+
title: "8-bit Calendar",
14+
description: "Displays an 8-bit calendar component.",
15+
openGraph: {
16+
images: calendarMetaData,
17+
},
18+
};
19+
20+
export default function CalendarBlocks() {
21+
return (
22+
<>
23+
<div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px]">
24+
<div className="flex flex-col md:flex-row gap-2 items-center justify-between">
25+
<h2 className="text-sm text-muted-foreground sm:pl-3">
26+
A simple calendar
27+
</h2>
28+
29+
<div className="flex flex-col md:flex-row items-center gap-2">
30+
<CopyCommandButton
31+
command="npx shadcn@latest add 8bit-calendar"
32+
copyCommand={`pnpm dlx shadcn@canary add ${process.env.NEXT_PUBLIC_BASE_URL}/r/8bit-calendar.json`}
33+
/>
34+
<OpenInV0Button name="8bit-calendar" className="w-fit" />
35+
</div>
36+
</div>
37+
<div className="flex items-center justify-center min-h-[400px] relative">
38+
<CalendarExample />
39+
</div>
40+
</div>
41+
42+
<div className="flex flex-col md:flex-row gap-2 items-center justify-between">
43+
<h2 className="text-sm text-muted-foreground sm:pl-3">
44+
A calendar with a range of dates.
45+
</h2>
46+
47+
<div className="flex flex-col md:flex-row items-center gap-2">
48+
<CopyCommandButton
49+
command="npx shadcn@latest add 8bit-calendar-range"
50+
copyCommand={`pnpm dlx shadcn@canary add ${process.env.NEXT_PUBLIC_BASE_URL}/r/8bit-calendar-range.json`}
51+
/>
52+
<OpenInV0Button name="8bit-calendar-range" className="w-fit" />
53+
</div>
54+
</div>
55+
<div className="flex items-center justify-center min-h-[400px] relative border rounded-md">
56+
<div className="flex items-center justify-center min-h-[400px] relative">
57+
<RangeCalendar />
58+
</div>
59+
</div>
60+
61+
<div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px]">
62+
<div className="flex flex-col md:flex-row gap-2 items-center justify-between">
63+
<h2 className="text-sm text-muted-foreground sm:pl-3">
64+
A calendar with a single date
65+
</h2>
66+
67+
<div className="flex flex-col md:flex-row items-center gap-2">
68+
<CopyCommandButton
69+
command="npx shadcn@latest add 8bit-login-form-2"
70+
copyCommand={`pnpm dlx shadcn@canary add ${process.env.NEXT_PUBLIC_BASE_URL}/r/8bit-login-form-2.json`}
71+
/>
72+
<OpenInV0Button name="8bit-calendar-single" className="w-fit" />
73+
</div>
74+
</div>
75+
<div className="flex items-center justify-center min-h-[400px] relative">
76+
<Calendar13 />
77+
</div>
78+
</div>
79+
</>
80+
);
81+
}

‎app/blocks/calendar/page.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { Metadata } from "next";
2+
import Link from "next/link";
3+
4+
import { Button } from "@/components/ui/8bit/button";
5+
6+
import CalendarBlocks from "./calendar";
7+
8+
export const metadata: Metadata = {
9+
title: "Building Retro Blocks for the Web - 8bitcn/ui",
10+
description:
11+
"Clean, retro building blocks. Copy and paste into your apps. Works with all React frameworks. Open Source. Free forever.",
12+
};
13+
14+
export default function BlocksPage() {
15+
return (
16+
<div className="flex flex-col p-4 gap-5 pt-10">
17+
<h1 className={`${"retro"} md:text-2xl font-bold`}>
18+
Building Retro Blocks for the Web
19+
</h1>
20+
<p className="max-w-2xl text-sm md:text-base">
21+
Clean, retro building blocks. Copy and paste into your apps. Works with
22+
all React frameworks. Open Source. Free forever.
23+
</p>
24+
25+
<div className="flex flex-col md:flex-row gap-5">
26+
<Button asChild>
27+
<Link href="/blocks/authentication">Authentication</Link>
28+
</Button>
29+
30+
<Button asChild>
31+
<Link href="/blocks/charts">Charts</Link>
32+
</Button>
33+
<Button variant="outline" asChild>
34+
<Link href="/blocks/calendar">Calendar</Link>
35+
</Button>
36+
</div>
37+
38+
<CalendarBlocks />
39+
</div>
40+
);
41+
}

‎app/blocks/charts/page.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,17 @@ export default function BlocksPage() {
2222
all React frameworks. Open Source. Free forever.
2323
</p>
2424

25-
<div className="flex gap-5">
26-
<Link href="/blocks/authentication">
27-
<Button>Authentication</Button>
28-
</Link>
29-
<Link href="/blocks/charts">
30-
<Button>Charts</Button>
31-
</Link>
25+
<div className="flex flex-col md:flex-row gap-5">
26+
<Button asChild>
27+
<Link href="/blocks/authentication">Authentication</Link>
28+
</Button>
29+
30+
<Button variant="outline" asChild>
31+
<Link href="/blocks/charts">Charts</Link>
32+
</Button>
33+
<Button asChild>
34+
<Link href="/blocks/calendar">Calendar</Link>
35+
</Button>
3236
</div>
3337

3438
<ChartsBlocks />

‎components/ui/8bit/button.tsx‎

Lines changed: 41 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -40,59 +40,62 @@ export interface BitButtonProps
4040
ref?: React.Ref<HTMLButtonElement>;
4141
}
4242

43-
function Button({ children, ...props }: BitButtonProps) {
43+
function Button({ children, asChild, ...props }: BitButtonProps) {
4444
const { variant, size, className, font } = props;
4545

4646
return (
4747
<ShadcnButton
4848
{...props}
4949
className={cn(
50-
"rounded-none active:translate-y-1 transition-transform relative",
50+
"rounded-none active:translate-y-1 transition-transform relative inline-flex items-center justify-center",
5151
font !== "normal" && "retro",
5252
className
5353
)}
5454
size={size}
5555
variant={variant}
56+
asChild={asChild}
5657
>
57-
{children}
58+
<div>
59+
{children}
5860

59-
{variant !== "ghost" && variant !== "link" && size !== "icon" && (
60-
<>
61-
{/* Pixelated border */}
62-
<div className="absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring" />
63-
<div className="absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring" />
64-
<div className="absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring" />
65-
<div className="absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring" />
66-
<div className="absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring" />
67-
<div className="absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring" />
68-
<div className="absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring" />
69-
<div className="absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring" />
70-
<div className="absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring" />
71-
<div className="absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring" />
72-
{variant !== "outline" && (
73-
<>
74-
{/* Top shadow */}
75-
<div className="absolute top-0 left-0 w-full h-1.5 bg-foreground/20" />
76-
<div className="absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20" />
61+
{variant !== "ghost" && variant !== "link" && size !== "icon" && (
62+
<>
63+
{/* Pixelated border */}
64+
<div className="absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring" />
65+
<div className="absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring" />
66+
<div className="absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring" />
67+
<div className="absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring" />
68+
<div className="absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring" />
69+
<div className="absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring" />
70+
<div className="absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring" />
71+
<div className="absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring" />
72+
<div className="absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring" />
73+
<div className="absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring" />
74+
{variant !== "outline" && (
75+
<>
76+
{/* Top shadow */}
77+
<div className="absolute top-0 left-0 w-full h-1.5 bg-foreground/20" />
78+
<div className="absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20" />
7779

78-
{/* Bottom shadow */}
79-
<div className="absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20" />
80-
<div className="absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20" />
81-
</>
82-
)}
83-
</>
84-
)}
80+
{/* Bottom shadow */}
81+
<div className="absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20" />
82+
<div className="absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20" />
83+
</>
84+
)}
85+
</>
86+
)}
8587

86-
{size === "icon" && (
87-
<>
88-
<div className="absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none" />
89-
<div className="absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none" />
90-
<div className="absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none" />
91-
<div className="absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none" />
92-
<div className="absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none" />
93-
<div className="absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none" />
94-
</>
95-
)}
88+
{size === "icon" && (
89+
<>
90+
<div className="absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none" />
91+
<div className="absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none" />
92+
<div className="absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none" />
93+
<div className="absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none" />
94+
<div className="absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none" />
95+
<div className="absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none" />
96+
</>
97+
)}
98+
</div>
9699
</ShadcnButton>
97100
);
98101
}

0 commit comments

Comments
 (0)