Skip to content

Commit a7b5616

Browse files
ariflogsariflogs
committed
secondary button ✅
1 parent daa0864 commit a7b5616

File tree

13 files changed

+131
-91
lines changed

13 files changed

+131
-91
lines changed

‎app/(docs)/docs/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export default function ComponentLayout({
1515
<div className="hidden lg:block">
1616
<SideNav />
1717
</div>
18-
<div className="lg:ml-72 px-4 lg:px-0">{children}</div>
18+
<div className="lg:ml-72 mt-16 md:mt-10 px-4 lg:px-0">{children}</div>
1919
</div>
2020
);
2121
}

‎app/(marketing)/page.tsx‎

Lines changed: 41 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -285,45 +285,6 @@ export default async function Home() {
285285
</div>
286286
</section>
287287

288-
<section className="container max-w-6xl mx-auto px-4 lg:px-0 grid grid-cols-1 lg:grid-cols-2 gap-8 items-center my-36">
289-
<div className="w-full">
290-
<Text as="h2">
291-
Ship Faster With <span className="text-outlined">RetroUI Pro</span>!
292-
</Text>
293-
<div className="flex flex-col space-y-1 mt-6 mb-8 text-muted-foreground">
294-
<Text className="text-lg">
295-
- Based on the design foundation of RetroUI.
296-
</Text>
297-
<Text className="text-lg">
298-
- Over 50+ premium ready-to-use components.
299-
</Text>
300-
<Text className="text-lg">
301-
- Complete pre-built website templates.
302-
</Text>
303-
<Text className="text-lg">
304-
- Lifetime access to all future updates.
305-
</Text>
306-
</div>
307-
308-
<Link
309-
id="checkout-figma-kit"
310-
data-umami-event="checkout-figma-kit"
311-
href="https://dub.sh/retroui-pro"
312-
target="_blank"
313-
>
314-
<Button>Checkout Now</Button>
315-
</Link>
316-
</div>
317-
<div className="w-full">
318-
<Image
319-
src="/images/figma-banner.png"
320-
width={800}
321-
height={800}
322-
alt="retroui code showcase"
323-
/>
324-
</div>
325-
</section>
326-
327288
<section className="container max-w-6xl mx-auto border-2 bg-primary border-black py-16 px-4 lg:p-16 my-36">
328289
<Text as="h2" className="text-center mb-2">
329290
Community Contributors
@@ -356,20 +317,59 @@ export default async function Home() {
356317
target="_blank"
357318
passHref
358319
>
359-
<Button className="flex items-center bg-white" variant="outline">
320+
<Button className="bg-white" variant="outline">
360321
<GithubIcon size="16" className="mr-2" />
361322
Star on Github
362323
</Button>
363324
</Link>
364325
<Link href="https://discord.gg/Jum3NJxK6Q" target="_blank" passHref>
365-
<Button className="flex items-center bg-white" variant="outline">
326+
<Button className="bg-white" variant="outline">
366327
<MessageCircle size="16" className="mr-2" />
367328
Join Community
368329
</Button>
369330
</Link>
370331
</div>
371332
</section>
372333

334+
<section className="container max-w-6xl mx-auto px-4 lg:px-0 grid grid-cols-1 lg:grid-cols-2 gap-8 items-center my-36">
335+
<div className="w-full">
336+
<Text as="h2">
337+
🚀 Ship <span className="text-outlined">Faster</span> With Pro
338+
Blocks and Templates!
339+
</Text>
340+
<div className="flex flex-col space-y-1 mt-6 mb-8 text-muted-foreground">
341+
<Text className="text-lg">
342+
- Based on the design foundation of RetroUI.
343+
</Text>
344+
<Text className="text-lg">
345+
- Over 50+ premium ready-to-use components.
346+
</Text>
347+
<Text className="text-lg">
348+
- Complete pre-built website templates.
349+
</Text>
350+
<Text className="text-lg">
351+
- Lifetime access to all future updates.
352+
</Text>
353+
</div>
354+
355+
<Link
356+
id="checkout-figma-kit"
357+
data-umami-event="checkout-figma-kit"
358+
href="https://dub.sh/retroui-pro"
359+
target="_blank"
360+
>
361+
<Button>Explore Blocks</Button>
362+
</Link>
363+
</div>
364+
<div className="w-full">
365+
<Image
366+
src="/images/figma-banner.png"
367+
width={800}
368+
height={800}
369+
alt="retroui code showcase"
370+
/>
371+
</div>
372+
</section>
373373
<footer className="bg-black py-8">
374374
<div className="container max-w-6xl mx-auto flex flex-col lg:flex-row space-y-4 lg:space-y-0 justify-between items-center">
375375
<div className="flex justify-center space-x-4">

‎app/global.css‎

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

77
--shadow-xs: 1px 1px 0 0 var(--border);
88
--shadow-sm: 2px 2px 0 0 var(--border);
9-
--shadow-md: 3px 3px 0 0 var(--border);
10-
--shadow-lg: 4px 4px 0 1px var(--border);
9+
--shadow: 3px 3px 0 0 var(--border);
10+
--shadow-md: 4px 4px 0 0 var(--border);
11+
--shadow-lg: 6px 6px 0 0 var(--border);
12+
--shadow-xl: 10px 10px 0 1px var(--border);
13+
--shadow-2xl: 16px 16px 0 1px var(--border);
1114

1215
--color-background: var(--background);
1316
--color-foreground: var(--foreground);

‎components/SideNav.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export default function SideNav() {
77
<div
88
className={`fixed right-auto border-r-2 border-black h-full overflow-y-scroll transition-transform transform md:translate-x-0 w-64 bg-white flex flex-col justify-center md:justify-start py-14 md:py-8`}
99
>
10-
<nav className="flex flex-col items-start pr-6 pb-16 space-y-4">
10+
<nav className="flex flex-col items-start px-6 lg:pl-0 pb-26 space-y-4">
1111
{navConfig.sideNavItems.map((item) => (
1212
<div key={item.title}>
1313
<Text as="h6">{item.title}</Text>

‎components/TopNav.tsx‎

Lines changed: 6 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
22
import Link from "next/link";
33
import Image from "next/image";
4-
import { GithubIcon, HeartIcon } from "lucide-react";
4+
import { GithubIcon } from "lucide-react";
55
import HamburgerMenu from "./HamburgerMenu";
66
import { Button, Text } from "@/components/ui";
77
import { navConfig } from "@/config/navigation";
@@ -11,25 +11,14 @@ export default function TopNav() {
1111
<>
1212
<nav className="fixed top-0 left-0 right-0 w-full border-b-2 border-black bg-white">
1313
<div className="w-full bg-black text-white">
14-
<div className="container max-w-6xl mx-auto px-4 py-2 flex justify-between md:justify-center space-x-4 items-center">
14+
<div className="container max-w-6xl mx-auto px-4 py-2 flex justify-center space-x-4 items-center">
1515
<Text className="text-sm text-center">
16-
Introducing{" "}
17-
<a
18-
href="https://dub.sh/retroui-pro"
19-
target="_blank"
20-
className="underline font-bold"
21-
>
22-
RetroUI Pro.
23-
</a>
24-
<span className="hidden md:block">
25-
Ship faster with premium blocks, templates, figma ui-kit and
26-
more!
27-
</span>
16+
Ship faster with premium blocks and templates!
2817
</Text>
2918
<a href="https://dub.sh/retroui-pro" target="_blank">
3019
<Button
3120
size="sm"
32-
className="shadow-none font-sans font-bold px-2 py-1"
21+
className="shadow-none font-sans font-bold px-2 py-1 w-24"
3322
>
3423
Learn More
3524
</Button>
@@ -85,12 +74,8 @@ export default function TopNav() {
8574
target="_blank"
8675
rel="noopener noreferrer"
8776
>
88-
<Button
89-
className="flex items-center"
90-
variant="outline"
91-
size="sm"
92-
>
93-
<GithubIcon size="16" className="mr-2" />
77+
<Button variant="secondary" size="sm">
78+
<GithubIcon size="14" className="mr-2" />
9479
Star on GitHub
9580
</Button>
9681
</Link>

‎components/ui/Button.tsx‎

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,31 @@ import { cn } from "@/lib/utils";
22
import { cva, VariantProps } from "class-variance-authority";
33
import React, { ButtonHTMLAttributes } from "react";
44

5-
const buttonVariants = cva("font-head transition-all outline-hidden", {
6-
variants: {
7-
variant: {
8-
default:
9-
"shadow-md hover:shadow-xs bg-primary text-black border-2 border-black hover:bg-primary-hover",
10-
outline:
11-
"shadow-md hover:shadow-xs bg-transparent text-black border-2 border-black",
12-
link: "bg-transparent text-black hover:underline",
5+
const buttonVariants = cva(
6+
"font-head transition-all outline-hidden cursor-pointer flex items-center",
7+
{
8+
variants: {
9+
variant: {
10+
default:
11+
"shadow-md hover:shadow-xs bg-primary text-black border-2 border-black hover:bg-primary-hover",
12+
secondary:
13+
"bg-black text-white shadow-primary hover:-translate-y-1 hover:shadow-md",
14+
outline:
15+
"shadow-md hover:shadow-xs bg-transparent text-black border-2 border-black",
16+
link: "bg-transparent text-black hover:underline hs",
17+
},
18+
size: {
19+
sm: "px-4 py-1.5 text-sm",
20+
md: "px-6 py-2 text-base",
21+
lg: "px-8 py-3 text-lg",
22+
},
1323
},
14-
size: {
15-
sm: "px-4 py-1 text-sm",
16-
md: "px-6 py-2 text-base",
17-
lg: "px-8 py-3 text-lg",
24+
defaultVariants: {
25+
size: "md",
26+
variant: "default",
1827
},
19-
},
20-
defaultVariants: {
21-
size: "md",
22-
variant: "default",
23-
},
24-
});
28+
}
29+
);
2530

2631
export interface IButtonProps
2732
extends ButtonHTMLAttributes<HTMLButtonElement>,

‎components/ui/Card.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const Card = ({ className, ...props }: ICardProps) => {
1010
return (
1111
<div
1212
className={cn(
13-
"inline-block border-2 border-black shadow-md cursor-pointer transition-all hover:shadow-xs",
13+
"inline-block border-2 border-black shadow-md transition-all hover:shadow-xs",
1414
className
1515
)}
1616
{...props}

‎config/components.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,13 @@ export const componentConfig: {
150150
filePath: "preview/components/button-style-default.tsx",
151151
preview: lazy(() => import("@/preview/components/button-style-default")),
152152
},
153+
"button-style-secondary": {
154+
name: "button-style-secondary",
155+
filePath: "preview/components/button-style-secondary.tsx",
156+
preview: lazy(
157+
() => import("@/preview/components/button-style-secondary")
158+
),
159+
},
153160
"button-style-outline": {
154161
name: "button-style-default",
155162
filePath: "preview/components/button-style-outline.tsx",
@@ -160,6 +167,13 @@ export const componentConfig: {
160167
filePath: "preview/components/button-style-link.tsx",
161168
preview: lazy(() => import("@/preview/components/button-style-link")),
162169
},
170+
"button-style-with-icon": {
171+
name: "button-style-with-icon",
172+
filePath: "preview/components/button-style-with-icon.tsx",
173+
preview: lazy(
174+
() => import("@/preview/components/button-style-with-icon")
175+
),
176+
},
163177
"card-style-default": {
164178
name: "card-style-default",
165179
filePath: "preview/components/card-style-default.tsx",

‎content/docs/components/button.mdx‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Button
33
description: This bold button makes sure your users click on it and perform the actions you want! 🚀
4-
lastUpdated: 04 Nov, 2024
4+
lastUpdated: 05 Apr, 2025
55
links:
66
source: https://github.com/Logging-Stuff/RetroUI/blob/main/components/ui/Buttons/Button.tsx
77
---
@@ -37,12 +37,19 @@ npm install class-variance-authority
3737

3838
## Examples
3939

40-
### Default
40+
### Primary
4141

4242
<ComponentShowcase name="button-style-default" />
4343
<br />
4444
<br />
4545

46+
### Secondary
47+
48+
<ComponentShowcase name="button-style-secondary" />
49+
<br />
50+
<br />
51+
52+
4653
### Outline
4754

4855
<ComponentShowcase name="button-style-outline" />
@@ -52,3 +59,10 @@ npm install class-variance-authority
5259
### Link
5360

5461
<ComponentShowcase name="button-style-link" />
62+
<br />
63+
<br />
64+
65+
### With Icon
66+
67+
<ComponentShowcase name="button-style-with-icon" />
68+

‎content/docs/index.mdx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,5 +20,6 @@ Follow the [Installation Guide](/docs/install) to get started.
2020
<br />
2121
<br />
2222

23-
24-
<iframe width="560" height="315" src="https://www.youtube.com/embed/7goHwy6k3gU?si=jwBAOm4ls_QtnN5r" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
23+
<div className="max-w-xl">
24+
<iframe width="100%" height="300px" src="https://www.youtube.com/embed/7goHwy6k3gU?si=jwBAOm4ls_QtnN5r" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
25+
</div>

0 commit comments

Comments
 (0)