Skip to content

Commit 5a7abef

Browse files
TheOrcDevTheOrcDev
authored
refactor(app) make all components work on react (#212)
1 parent 4612a59 commit 5a7abef

File tree

94 files changed

+726
-482
lines changed

Some content is hidden

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

94 files changed

+726
-482
lines changed

‎app/blocks/page.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import { Metadata } from "next";
22

3-
import { pressStart } from "@/config/fonts";
4-
53
import { LoginForm } from "@/components/ui/8bit/blocks/login-form";
64
import { LoginForm as LoginForm2 } from "@/components/ui/8bit/blocks/login-form-2";
75
import { LoginForm as LoginFormWithImage } from "@/components/ui/8bit/blocks/login-form-with-image";
@@ -19,7 +17,7 @@ export const metadata: Metadata = {
1917
export default function BlocksPage() {
2018
return (
2119
<div className="flex flex-col p-4 gap-5 pt-10">
22-
<h1 className={`${pressStart.className} md:text-2xl font-bold`}>
20+
<h1 className={`${"retro"} md:text-2xl font-bold`}>
2321
Building Retro Blocks for the Web
2422
</h1>
2523
<p className="max-w-2xl text-sm md:text-base">

‎app/docs/components/breadcrumb/page.tsx‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { Metadata } from "next";
2-
import { Press_Start_2P } from "next/font/google";
32
import Link from "next/link";
43

54
import { breadcrumbMetaData } from "@/lib/metadata";
@@ -27,11 +26,6 @@ import CopyCommandButton from "../copy-command-button";
2726
import InstallationCommands from "../installation-commands";
2827
import { OpenInV0Button } from "../open-in-v0-button";
2928

30-
const pressStart = Press_Start_2P({
31-
weight: ["400"],
32-
subsets: ["latin"],
33-
});
34-
3529
export const metadata: Metadata = {
3630
title: "8-bit Breadcrumb",
3731
description: "Displays an 8-bit breadcrumb component.",
@@ -241,13 +235,13 @@ export default function BreadcrumbPageNext() {
241235
<BreadcrumbLink href="/">Home</BreadcrumbLink>
242236
</BreadcrumbItem>
243237
<BreadcrumbSeparator>
244-
<span className={cn(pressStart.className)}>/</span>
238+
<span className={cn("retro")}>/</span>
245239
</BreadcrumbSeparator>
246240
<BreadcrumbItem>
247241
<BreadcrumbLink href="/components">Components</BreadcrumbLink>
248242
</BreadcrumbItem>
249243
<BreadcrumbSeparator>
250-
<span className={cn(pressStart.className)}>/</span>
244+
<span className={cn("retro")}>/</span>
251245
</BreadcrumbSeparator>
252246
<BreadcrumbItem>
253247
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
@@ -302,7 +296,7 @@ export default function BreadcrumbPageNext() {
302296
<BreadcrumbLink href="/">Home</BreadcrumbLink>
303297
</BreadcrumbItem>
304298
<BreadcrumbSeparator>
305-
<span className={cn(pressStart.className)}>/</span>
299+
<span className={cn("retro")}>/</span>
306300
</BreadcrumbSeparator>
307301
<BreadcrumbItem>
308302
<DropdownMenu>
@@ -318,7 +312,7 @@ export default function BreadcrumbPageNext() {
318312
</DropdownMenu>
319313
</BreadcrumbItem>
320314
<BreadcrumbSeparator>
321-
<span className={cn(pressStart.className)}>/</span>
315+
<span className={cn("retro")}>/</span>
322316
</BreadcrumbSeparator>
323317
<BreadcrumbItem>
324318
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>

‎app/docs/components/sidebar/page.tsx‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { Metadata } from "next";
2-
import { Press_Start_2P } from "next/font/google";
32
import Link from "next/link";
43

54
import { Calendar, Home, Inbox, Search, Settings } from "lucide-react";
@@ -33,11 +32,6 @@ export const metadata: Metadata = {
3332
},
3433
};
3534

36-
const pressStart = Press_Start_2P({
37-
weight: ["400"],
38-
subsets: ["latin"],
39-
});
40-
4135
// Menu items.
4236
const items = [
4337
{
@@ -97,7 +91,7 @@ export default function SidebarPage() {
9791
<div className="flex border w-full h-[450px]">
9892
<Sidebar
9993
collapsible="none"
100-
className={`${pressStart.className} border-r-4 border-foreground dark:border-ring`}
94+
className={`${"retro"} border-r-4 border-foreground dark:border-ring`}
10195
>
10296
<SidebarContent>
10397
<SidebarGroup>

‎app/page.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
import Link from "next/link";
22

3-
import { pressStart } from "@/config/fonts";
4-
53
import { Button } from "@/components/ui/8bit/button";
64

75
import ComponentShowcase from "@/components/examples/component-showcase";
86

97
export default function Home() {
108
return (
119
<div className="flex flex-col p-4 gap-5 pt-10">
12-
<h1 className={`${pressStart.className} md:text-2xl font-bold`}>
10+
<h1 className={`${"retro"} md:text-2xl font-bold`}>
1311
Build your retro component library
1412
</h1>
1513
<p className="max-w-2xl text-sm md:text-base">

‎app/themes/page.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import { Metadata } from "next";
22

3-
import { pressStart } from "@/config/fonts";
4-
53
import ComponentShowcase from "@/components/examples/component-showcase";
64
import { ThemeSelector } from "@/components/theme-selector";
75

@@ -15,7 +13,7 @@ export default function ThemesPage() {
1513
return (
1614
<>
1715
<div className="flex flex-col p-4 gap-5 py-10">
18-
<h1 className={`${pressStart.className} md:text-2xl font-bold`}>
16+
<h1 className={`retro md:text-2xl font-bold`}>
1917
Add colors. Make it yours.
2018
</h1>
2119
<p className="max-w-2xl text-sm md:text-base">

‎components/site-header.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import Image from "next/image";
22
import Link from "next/link";
33

4-
import { pressStart } from "@/config/fonts";
54
import { navItems } from "@/config/nav-items";
65

76
import { Button } from "@/components/ui/button";
@@ -16,9 +15,7 @@ export function SiteHeader() {
1615
<div className="flex w-full items-center h-full gap-1 px-4 md:gap-5 md:px-6 max-w-[1400px] mx-auto border-dashed border-l border-r">
1716
<Link href="/" className="hidden md:flex items-center gap-2">
1817
<Image src="/8bitcn.png" alt="logo" width={32} height={32} />{" "}
19-
<h2
20-
className={`${pressStart.className} hidden font-bold md:inline-block text-xs`}
21-
>
18+
<h2 className={`${"retro"} hidden font-bold md:inline-block text-xs`}>
2219
8bitcn/ui
2320
</h2>
2421
</Link>

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

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@
22

33
import * as React from "react";
44

5-
import { Press_Start_2P } from "next/font/google";
6-
75
import * as AccordionPrimitive from "@radix-ui/react-accordion";
86

97
import { cn } from "@/lib/utils";
@@ -15,10 +13,7 @@ import {
1513
AccordionTrigger as ShadcnAccordionTrigger,
1614
} from "@/components/ui/accordion";
1715

18-
const pressStart = Press_Start_2P({
19-
weight: ["400"],
20-
subsets: ["latin"],
21-
});
16+
import "./styles/retro.css";
2217

2318
export interface BitAccordionItemProps
2419
extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> {
@@ -45,7 +40,7 @@ function AccordionItem({
4540

4641
export interface BitAccordionTriggerProps
4742
extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {
48-
font?: "normal" | "pressStart";
43+
font?: "normal" | "retro";
4944
}
5045

5146
function AccordionTrigger({
@@ -56,7 +51,7 @@ function AccordionTrigger({
5651
}: BitAccordionTriggerProps) {
5752
return (
5853
<ShadcnAccordionTrigger
59-
className={cn(font !== "normal" && pressStart.className, className)}
54+
className={cn(font !== "normal" && "retro", className)}
6055
{...props}
6156
>
6257
{children}
@@ -66,7 +61,7 @@ function AccordionTrigger({
6661

6762
export interface BitAccordionContentProps
6863
extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> {
69-
font?: "normal" | "pressStart";
64+
font?: "normal" | "retro";
7065
}
7166

7267
function AccordionContent({
@@ -80,7 +75,7 @@ function AccordionContent({
8075
<ShadcnAccordionContent
8176
className={cn(
8277
"overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
83-
font !== "normal" && pressStart.className,
78+
font !== "normal" && "retro",
8479
className
8580
)}
8681
{...props}

‎components/ui/8bit/alert-dialog.tsx‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@
22

33
import * as React from "react";
44

5-
import { Press_Start_2P } from "next/font/google";
6-
75
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
86
import { VariantProps, cva } from "class-variance-authority";
97

@@ -23,16 +21,13 @@ import {
2321
AlertDialogTrigger as ShadcnAlertDialogTrigger,
2422
} from "@/components/ui/alert-dialog";
2523

26-
const pressStart = Press_Start_2P({
27-
weight: ["400"],
28-
subsets: ["latin"],
29-
});
24+
import "./styles/retro.css";
3025

3126
export const alertDialogVariants = cva("", {
3227
variants: {
3328
font: {
3429
normal: "",
35-
retro: pressStart.className,
30+
retro: "retro",
3631
},
3732
},
3833
defaultVariants: {
@@ -92,7 +87,7 @@ function AlertDialogContent({
9287
<ShadcnAlertDialogContent
9388
className={cn(
9489
"rounded-none border-y-6 border-foreground dark:border-ring",
95-
font !== "normal" && pressStart.className,
90+
font !== "normal" && "retro",
9691
className
9792
)}
9893
{...props}

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

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import { Press_Start_2P } from "next/font/google";
2-
31
import { VariantProps, cva } from "class-variance-authority";
42

53
import { cn } from "@/lib/utils";
@@ -10,16 +8,11 @@ import {
108
AlertTitle as ShadcnAlertTitle,
119
} from "@/components/ui/alert";
1210

13-
const pressStart = Press_Start_2P({
14-
weight: ["400"],
15-
subsets: ["latin"],
16-
});
17-
1811
export const alertVariants = cva("", {
1912
variants: {
2013
font: {
2114
normal: "",
22-
retro: pressStart.className,
15+
retro: "retro",
2316
},
2417
variant: {
2518
default: "bg-card text-card-foreground",
@@ -46,7 +39,7 @@ function Alert({ children, ...props }: BitAlertProps) {
4639
variant={variant}
4740
className={cn(
4841
"relative rounded-none border-none bg-background",
49-
font !== "normal" && pressStart.className,
42+
font !== "normal" && "retro",
5043
className
5144
)}
5245
>

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

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,18 @@
11
import type React from "react";
22
import { forwardRef } from "react";
33

4-
import { Press_Start_2P } from "next/font/google";
5-
64
import * as AvatarPrimitive from "@radix-ui/react-avatar";
75
import { cva } from "class-variance-authority";
86

97
import { cn } from "@/lib/utils";
108

11-
const pressStart = Press_Start_2P({
12-
weight: ["400"],
13-
subsets: ["latin"],
14-
});
9+
import "./styles/retro.css";
1510

1611
export const avatarVariants = cva("", {
1712
variants: {
1813
font: {
1914
normal: "",
20-
retro: pressStart.className,
15+
retro: "retro",
2116
},
2217
variant: {
2318
default: "",
@@ -104,7 +99,7 @@ const Avatar = forwardRef<
10499
"relative flex size-10 shrink-0 overflow-hidden text-xs",
105100
!isPixel && "rounded-none",
106101
isPixel && "rounded-full",
107-
font !== "normal" && pressStart.className,
102+
font !== "normal" && "retro",
108103
variant === "retro" && "image-rendering-pixelated",
109104
className
110105
)}
@@ -143,7 +138,7 @@ const AvatarImage = forwardRef<
143138
data-slot="avatar-image"
144139
className={cn(
145140
"aspect-square h-full w-full",
146-
font === "retro" && pressStart.className,
141+
font === "retro" && "retro",
147142
className
148143
)}
149144
{...props}

0 commit comments

Comments
 (0)