Skip to content

Commit 118dfe1

Browse files
AlSirangAlSirang
committed
replace old typography components with new Typography component
1 parent 50a40b4 commit 118dfe1

File tree

15 files changed

+3161
-3982
lines changed

15 files changed

+3161
-3982
lines changed

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { allDocs } from "contentlayer/generated";
33
import { notFound } from "next/navigation";
44
import { format } from "date-fns";
55
import MDX from "@/components/MDX";
6-
import { H2 } from "@/packages/ui";
6+
import { Typography } from "@/packages/ui";
77
import { Metadata } from "next";
88

99
interface IProps {
@@ -46,7 +46,9 @@ 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-
<H2>{doc.title}</H2>
49+
<Typography variant="h2" component="h2">
50+
{doc.title}
51+
</Typography>
5052
<p className="text-lg text-muted">{doc.description}</p>
5153
</div>
5254
<div>

‎app/(marketing)/page.tsx‎

Lines changed: 46 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,7 @@ import {
33
Badge,
44
BasicCard,
55
Button,
6-
H1,
7-
H2,
8-
H3,
9-
H4,
6+
Typography,
107
Input,
118
Textarea,
129
} from "@/packages/ui";
@@ -20,8 +17,8 @@ export default function Home() {
2017
<main className="space-y-36">
2118
<section className="container max-w-6xl mx-auto px-4 lg:px-0 mt-36 text-gray-900 flex justify-center items-center">
2219
<div className="text-center lg:text-left w-full lg:w-2/3">
23-
<H1>Make your projects</H1>
24-
<H1 className="text-outlined">stand out!</H1>
20+
<Typography>Make your projects</Typography>
21+
<Typography className="text-outlined">stand out!</Typography>
2522

2623
<p className="text-lg text-muted mb-8 mt-4">
2724
Retro styled component library for modern web apps. Comes with 20+
@@ -60,53 +57,67 @@ export default function Home() {
6057
</section>
6158

6259
<section className="container max-w-6xl mx-auto px-4 lg:px-0">
63-
<H2 className="mb-16 text-center">
60+
<Typography variant="h2" component="h2" className="mb-16 text-center">
6461
Our components look both old school and modern! ✨
65-
</H2>
62+
</Typography>
6663

6764
<div className="grid gap-4 grid-cols-2 lg:grid-cols-4 mb-8">
6865
<div className="space-y-4">
69-
<H4>Button</H4>
66+
<Typography variant="h4" component="h3">
67+
Button
68+
</Typography>
7069
<Button>Click Me</Button>
7170
</div>
7271
<div className="space-y-4">
73-
<H4>Badge</H4>
72+
<Typography variant="h4" component="h3">
73+
Badge
74+
</Typography>
7475
<div className="flex flex-wrap space-y-2 lg:space-y-0 space-x-2">
7576
<Badge>Default Badge</Badge>
7677
<Badge variant="error">Error Badge</Badge>
7778
</div>
7879
</div>
7980
<div className="space-y-4">
80-
<H4>Avatar</H4>
81+
<Typography variant="h4" component="h3">
82+
Avatar
83+
</Typography>
8184
<Avatar />
8285
</div>
8386
<div className="space-y-4">
84-
<H4>Input</H4>
87+
<Typography variant="h4" component="h3">
88+
Input
89+
</Typography>
8590
<Input />
8691
</div>
8792
</div>
8893
<div className="grid gap-8 grid-cols-1 lg:grid-cols-3">
8994
<div className="space-y-4">
90-
<H4>Textarea</H4>
95+
<Typography variant="h4" component="h3">
96+
Textarea
97+
</Typography>
9198
<Textarea />
9299
</div>
93100
<div className="space-y-4">
94-
<H4>Basic Card</H4>
101+
<Typography variant="h4" component="h3">
102+
Basic Card
103+
</Typography>
95104
<BasicCard />
96105
</div>
97106
<div className="space-y-4">
98-
<H4>Accordion</H4>
107+
<Typography variant="h4" component="h3">
108+
Accordion
109+
</Typography>
99110
<AccordionStyleDefault />
100111
</div>
101112
</div>
102113
</section>
103114

104115
<section className="container max-w-6xl mx-auto px-4 lg:px-0">
105-
<H2 className="mb-16 text-center">
116+
<Typography variant="h2" component="h2" className="mb-16 text-center">
106117
And NO! We didn&apos;t just copy Gumroad!
107118
<br />
108119
Inspired, if you will... 💅
109-
</H2>
120+
</Typography>
110121

111122
<div className="grid grid-cols-1 lg:grid-cols-3 items-center">
112123
<Image
@@ -115,11 +126,21 @@ export default function Home() {
115126
width={300}
116127
height={500}
117128
/>
118-
<H3 className="lg:hidden mt-2 mb-12">👆 RetroUI Card</H3>
129+
<Typography
130+
variant="h3"
131+
component="h3"
132+
className="lg:hidden mt-2 mb-12"
133+
>
134+
👆 RetroUI Card
135+
</Typography>
119136

120137
<div className="hidden lg:block space-y-4">
121-
<H2 className="text-left">👈 RetroUI Card</H2>
122-
<H2 className="text-right">Gumroad&apos;s Card 👉</H2>
138+
<Typography variant="h2" component="h2" className="text-left">
139+
👈 RetroUI Card
140+
</Typography>
141+
<Typography variant="h2" component="h2" className="text-right">
142+
Gumroad&apos;s Card 👉
143+
</Typography>
123144
</div>
124145
<Image
125146
src="/images/gumroad_product_card.png"
@@ -128,14 +149,16 @@ export default function Home() {
128149
width={300}
129150
height={600}
130151
/>
131-
<H3 className="lg:hidden mt-2">👆 Gumroad&apos;s Card</H3>
152+
<Typography component="h3" variant="h3" className="lg:hidden mt-2">
153+
👆 Gumroad&apos;s Card
154+
</Typography>
132155
</div>
133156
</section>
134157

135158
<section className="container max-w-6xl mx-auto border-2 bg-primary-400 border-black py-16 px-4 lg:p-16">
136-
<H2 className="mb-8 text-center">
159+
<Typography component="h2" variant="h2" className="mb-8 text-center">
137160
And did I mention it&apos;s Free and Open Source?
138-
</H2>
161+
</Typography>
139162
<div className="flex flex-col lg:flex-row items-center justify-center space-y-4 lg:space-y-0 lg:space-x-4">
140163
<Link
141164
href="https://github.com/Logging-Stuff/retroui"

‎components/JoinNewsletter.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
"use client"
1+
"use client";
22

3-
import { Button, H2, Input } from "@/packages/ui";
3+
import { Button, Typography, Input } from "@/packages/ui";
44
import { useState } from "react";
55

66
const INIT = "INIT";
@@ -150,7 +150,9 @@ 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-
<H2>Join Our Newsletter</H2>
153+
<Typography variant="h2" component="h2">
154+
Join Our Newsletter
155+
</Typography>
154156
<p className="text-lg text-muted mb-8">
155157
Get notified about latest updates and new launches.
156158
</p>

‎components/MDX.tsx‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use client";
22

3-
import { H1, H2, H3, H4, H5, H6 } from "@/packages/ui";
3+
import { Typography } from "@/packages/ui";
44
import { useMDXComponent } from "next-contentlayer/hooks";
55
import React, { HTMLAttributes } from "react";
66
import { ComponentShowcase } from "./ComponentShowcase";
@@ -9,18 +9,27 @@ import { ComponentSource } from "./ComponentSource";
99
import { CodeBlock } from "./CodeBlock";
1010

1111
const components = {
12-
h1: H1,
12+
h1: Typography,
1313
h2: (props: HTMLAttributes<HTMLHeadingElement>) => (
14-
<H2 className="border-b lg:text-3xl pb-1 mb-6" {...props} />
14+
<Typography
15+
variant="h2"
16+
component="h2"
17+
className="border-b lg:text-3xl pb-1 mb-6"
18+
{...props}
19+
/>
1520
),
1621
h3: (props: HTMLAttributes<HTMLHeadingElement>) => (
17-
<H3 className="mb-4" {...props} />
22+
<Typography variant="h3" component="h3" className="mb-4" {...props} />
1823
),
1924
h4: (props: HTMLAttributes<HTMLHeadingElement>) => (
20-
<H4 className="mb-2" {...props} />
25+
<Typography variant="h4" component="h4" className="mb-2" {...props} />
26+
),
27+
h5: (props: HTMLAttributes<HTMLHeadElement>) => (
28+
<Typography variant="h5" component="h5" {...props} />
29+
),
30+
h6: (props: HTMLAttributes<HTMLHeadElement>) => (
31+
<Typography variant="h6" component="h6" {...props} />
2132
),
22-
h5: H5,
23-
h6: H6,
2433
pre: CodeBlock,
2534
code: ({
2635
className,

‎components/SideNav.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { navConfig } from "@/config/navigation";
2-
import { H6 } from "@/packages/ui";
2+
import { Typography } from "@/packages/ui";
33
import Link from "next/link";
44

55
export default function SideNav() {
@@ -10,7 +10,9 @@ 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-
<H6>{item.title}</H6>
13+
<Typography variant="h6" component="h6">
14+
{item.title}
15+
</Typography>
1416
<div className="flex flex-col space-y-2">
1517
{item.children.map((child) => (
1618
<Link key={child.title} href={child.href}>

‎packages/ui/Cards/Card.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { cn } from "@/lib/utils";
22
import { HTMLAttributes } from "react";
3-
import { H3 } from "../Typography";
3+
import { Typography } from "../Typography";
44
import { Content } from "next/font/google";
55

66
interface ICardProps extends HTMLAttributes<HTMLDivElement> {
@@ -29,7 +29,14 @@ const CardHeader = ({ className, ...props }: ICardProps) => {
2929
};
3030

3131
const CardTitle = ({ className, ...props }: ICardProps) => {
32-
return <H3 className={cn("mb-2", className)} {...props} />;
32+
return (
33+
<Typography
34+
variant="h3"
35+
component="h3"
36+
className={cn("mb-2", className)}
37+
{...props}
38+
/>
39+
);
3340
};
3441

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

‎packages/ui/Login/Login.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from "react";
2-
import { H2 } from "../Typography";
2+
import { Typography } from "../Typography";
33
import { Input } from "../Form";
44
import { Button } from "../Buttons";
55
import Link from "next/link";
@@ -8,7 +8,9 @@ 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-
<H2>Login</H2>
11+
<Typography variant="h2" component="h2">
12+
Login
13+
</Typography>
1214
</div>
1315
<form className="flex flex-col gap-5 ">
1416
<div className="flex flex-col items-center justify-center">

‎packages/ui/Typography/H1.tsx‎

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

‎packages/ui/Typography/H2.tsx‎

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

‎packages/ui/Typography/H3.tsx‎

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

0 commit comments

Comments
 (0)