Skip to content

Commit 8540461

Browse files
AlSirangAlSirang
committed
replace tag and variant prop with as
1 parent fa3f6ab commit 8540461

File tree

11 files changed

+40
-112
lines changed

11 files changed

+40
-112
lines changed

‎app/(docs)/docs/[[...slug]]/page.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,9 +46,7 @@ export default function page({ params }: IProps) {
4646
return (
4747
<div className="space-y-12 py-8">
4848
<div className="border-b border-black pb-4">
49-
<Text variant="h2" tag="h2">
50-
{doc.title}
51-
</Text>
49+
<Text as="h2">{doc.title}</Text>
5250
<p className="text-lg text-muted">{doc.description}</p>
5351
</div>
5452
<div>

‎app/(marketing)/page.tsx‎

Lines changed: 16 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,8 @@ export default function Home() {
1717
<main className="space-y-36">
1818
<section className="container max-w-6xl mx-auto px-4 lg:px-0 mt-36 text-gray-900 flex justify-center items-center">
1919
<div className="text-center lg:text-left w-full lg:w-2/3">
20-
<Text tag="h1" variant="h1">
21-
Make your projects
22-
</Text>
23-
<Text tag="h1" variant="h1" className="text-outlined">
20+
<Text as="h1">Make your projects</Text>
21+
<Text as="h1" className="text-outlined">
2422
stand out!
2523
</Text>
2624

@@ -61,63 +59,49 @@ export default function Home() {
6159
</section>
6260

6361
<section className="container max-w-6xl mx-auto px-4 lg:px-0">
64-
<Text variant="h2" tag="h2" className="mb-16 text-center">
62+
<Text as="h2" className="mb-16 text-center">
6563
Our components look both old school and modern! ✨
6664
</Text>
6765

6866
<div className="grid gap-4 grid-cols-2 lg:grid-cols-4 mb-8">
6967
<div className="space-y-4">
70-
<Text variant="h4" tag="h3">
71-
Button
72-
</Text>
68+
<Text as="h4">Button</Text>
7369
<Button>Click Me</Button>
7470
</div>
7571
<div className="space-y-4">
76-
<Text variant="h4" tag="h3">
77-
Badge
78-
</Text>
72+
<Text as="h4">Badge</Text>
7973
<div className="flex flex-wrap space-y-2 lg:space-y-0 space-x-2">
8074
<Badge>Default Badge</Badge>
8175
<Badge variant="error">Error Badge</Badge>
8276
</div>
8377
</div>
8478
<div className="space-y-4">
85-
<Text variant="h4" tag="h3">
86-
Avatar
87-
</Text>
79+
<Text as="h4">Avatar</Text>
8880
<Avatar />
8981
</div>
9082
<div className="space-y-4">
91-
<Text variant="h4" tag="h3">
92-
Input
93-
</Text>
83+
<Text as="h4">Input</Text>
9484
<Input />
9585
</div>
9686
</div>
9787
<div className="grid gap-8 grid-cols-1 lg:grid-cols-3">
9888
<div className="space-y-4">
99-
<Text variant="h4" tag="h3">
100-
Textarea
101-
</Text>
89+
<Text as="h4">Textarea</Text>
10290
<Textarea />
10391
</div>
10492
<div className="space-y-4">
105-
<Text variant="h4" tag="h3">
106-
Basic Card
107-
</Text>
93+
<Text as="h4">Basic Card</Text>
10894
<BasicCard />
10995
</div>
11096
<div className="space-y-4">
111-
<Text variant="h4" tag="h3">
112-
Accordion
113-
</Text>
97+
<Text as="h4">Accordion</Text>
11498
<AccordionStyleDefault />
11599
</div>
116100
</div>
117101
</section>
118102

119103
<section className="container max-w-6xl mx-auto px-4 lg:px-0">
120-
<Text variant="h2" tag="h2" className="mb-16 text-center">
104+
<Text as="h2" className="mb-16 text-center">
121105
And NO! We didn&apos;t just copy Gumroad!
122106
<br />
123107
Inspired, if you will... 💅
@@ -130,15 +114,15 @@ export default function Home() {
130114
width={300}
131115
height={500}
132116
/>
133-
<Text variant="h3" tag="h3" className="lg:hidden mt-2 mb-12">
117+
<Text as="h3" className="lg:hidden mt-2 mb-12">
134118
👆 RetroUI Card
135119
</Text>
136120

137121
<div className="hidden lg:block space-y-4">
138-
<Text variant="h2" tag="h2" className="text-left">
122+
<Text as="h2" className="text-left">
139123
👈 RetroUI Card
140124
</Text>
141-
<Text variant="h2" tag="h2" className="text-right">
125+
<Text as="h2" className="text-right">
142126
Gumroad&apos;s Card 👉
143127
</Text>
144128
</div>
@@ -149,14 +133,14 @@ export default function Home() {
149133
width={300}
150134
height={600}
151135
/>
152-
<Text tag="h3" variant="h3" className="lg:hidden mt-2">
136+
<Text as="h3" className="lg:hidden mt-2">
153137
👆 Gumroad&apos;s Card
154138
</Text>
155139
</div>
156140
</section>
157141

158142
<section className="container max-w-6xl mx-auto border-2 bg-primary-400 border-black py-16 px-4 lg:p-16">
159-
<Text tag="h2" variant="h2" className="mb-8 text-center">
143+
<Text as="h2" className="mb-8 text-center">
160144
And did I mention it&apos;s Free and Open Source?
161145
</Text>
162146
<div className="flex flex-col lg:flex-row items-center justify-center space-y-4 lg:space-y-0 lg:space-x-4">

‎components/JoinNewsletter.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -150,9 +150,7 @@ export function JoinNewsletter() {
150150
return (
151151
<div className="w-full max-w-6xl mx-auto py-16 px-4 border-2 border-black">
152152
<div className="flex flex-col justify-center items-center text-center">
153-
<Text variant="h2" tag="h2">
154-
Join Our Newsletter
155-
</Text>
153+
<Text as="h2">Join Our Newsletter</Text>
156154
<p className="text-lg text-muted mb-8">
157155
Get notified about latest updates and new launches.
158156
</p>

‎components/MDX.tsx‎

Lines changed: 6 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,28 +10,19 @@ import { CodeBlock } from "./CodeBlock";
1010

1111
const components = {
1212
h1: (props: HTMLAttributes<HTMLHeadingElement>) => (
13-
<Text tag="h1" variant="h1" {...props} />
13+
<Text as="h1" {...props} />
1414
),
1515
h2: (props: HTMLAttributes<HTMLHeadingElement>) => (
16-
<Text
17-
variant="h2"
18-
tag="h2"
19-
className="border-b lg:text-3xl pb-1 mb-6"
20-
{...props}
21-
/>
16+
<Text as="h2" className="border-b lg:text-3xl pb-1 mb-6" {...props} />
2217
),
2318
h3: (props: HTMLAttributes<HTMLHeadingElement>) => (
24-
<Text variant="h3" tag="h3" className="mb-4" {...props} />
19+
<Text as="h3" className="mb-4" {...props} />
2520
),
2621
h4: (props: HTMLAttributes<HTMLHeadingElement>) => (
27-
<Text variant="h4" tag="h4" className="mb-2" {...props} />
28-
),
29-
h5: (props: HTMLAttributes<HTMLHeadElement>) => (
30-
<Text variant="h5" tag="h5" {...props} />
31-
),
32-
h6: (props: HTMLAttributes<HTMLHeadElement>) => (
33-
<Text variant="h6" tag="h6" {...props} />
22+
<Text as="h4" className="mb-2" {...props} />
3423
),
24+
h5: (props: HTMLAttributes<HTMLHeadElement>) => <Text as="h5" {...props} />,
25+
h6: (props: HTMLAttributes<HTMLHeadElement>) => <Text as="h6" {...props} />,
3526
pre: CodeBlock,
3627
code: ({
3728
className,

‎components/SideNav.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,7 @@ export default function SideNav() {
1010
<nav className="flex flex-col items-start pr-6 space-y-4">
1111
{navConfig.sideNavItems.map((item) => (
1212
<div key={item.title}>
13-
<Text variant="h6" tag="h6">
14-
{item.title}
15-
</Text>
13+
<Text as="h6">{item.title}</Text>
1614
<div className="flex flex-col space-y-2">
1715
{item.children.map((child) => (
1816
<Link key={child.title} href={child.href}>

‎config/components.ts‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -107,11 +107,6 @@ export const componentConfig = {
107107
() => import("@/preview/components/textarea-style-default")
108108
),
109109
},
110-
"text-examples": {
111-
name: "text-examples",
112-
filePath: "preview/components/text-examples.tsx",
113-
preview: lazy(() => import("@/preview/components/text-examples")),
114-
},
115110
"text-headings": {
116111
name: "text-headings",
117112
filePath: "preview/components/text-headings.tsx",

‎packages/ui/Cards/Card.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,7 @@ const CardHeader = ({ className, ...props }: ICardProps) => {
2929
};
3030

3131
const CardTitle = ({ className, ...props }: ICardProps) => {
32-
return (
33-
<Text variant="h3" tag="h3" className={cn("mb-2", className)} {...props} />
34-
);
32+
return <Text as="h3" className={cn("mb-2", className)} {...props} />;
3533
};
3634

3735
const CardDescription = ({ className, ...props }: ICardProps) => (

‎packages/ui/Login/Login.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,7 @@ export function Login() {
88
return (
99
<div className="max-w-80 p-4 border-2 border-black shadow-md space-y-3">
1010
<div className="text-center">
11-
<Text variant="h2" tag="h2">
12-
Login
13-
</Text>
11+
<Text as="h2">Login</Text>
1412
</div>
1513
<form className="flex flex-col gap-5 ">
1614
<div className="flex flex-col items-center justify-center">

‎packages/ui/Text/Text.tsx‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { cn } from "@/lib/utils";
44

55
const textVariants = cva("font-head", {
66
variants: {
7-
variant: {
7+
as: {
88
p: "font-sans text-base",
99
h1: "text-5xl lg:text-6xl font-bold",
1010
h2: "text-3xl lg:text-4xl font-semibold",
@@ -15,24 +15,21 @@ const textVariants = cva("font-head", {
1515
},
1616
},
1717
defaultVariants: {
18-
variant: "p",
18+
as: "p",
1919
},
2020
});
2121

22-
type TagsMap = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p";
23-
24-
interface TextProps<T extends TagsMap = "p">
22+
interface TextProps
2523
extends Omit<HTMLAttributes<HTMLElement>, "className">,
2624
VariantProps<typeof textVariants> {
2725
className?: string;
28-
tag?: T;
2926
}
3027

31-
export const Text = <T extends TagsMap>(props: TextProps<T>) => {
32-
const { className, tag = "p" as T, variant, ...otherProps } = props;
33-
const Tag: ElementType = tag;
28+
export const Text = (props: TextProps) => {
29+
const { className, as, ...otherProps } = props;
30+
const Tag: ElementType = as || "p";
3431

3532
return (
36-
<Tag className={cn(textVariants({ variant }), className)} {...otherProps} />
33+
<Tag className={cn(textVariants({ as }), className)} {...otherProps} />
3734
);
3835
};

‎preview/components/text-examples.tsx‎

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

0 commit comments

Comments
 (0)