Skip to content

Commit b3c684a

Browse files
technoph1letechnoph1le
committed
feat(ui): add sponsor button & update <Card/> elements
1 parent 637a7f7 commit b3c684a

File tree

11 files changed

+231
-87
lines changed

11 files changed

+231
-87
lines changed

‎public/images/kofi-button.png‎

3.67 KB
Loading

‎src/app/community/page.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const QUICKSNIP_YT_VIDEOS = [
1919
},
2020
];
2121

22-
const Communitypage = () => {
22+
export default function Communitypage() {
2323
return (
2424
<>
2525
<section>
@@ -120,9 +120,7 @@ const Communitypage = () => {
120120
</section>
121121
</>
122122
);
123-
};
124-
125-
export default Communitypage;
123+
}
126124

127125
/**
128126
* Fetch `CONTRIBUTING.md`

‎src/app/extensions/page.tsx‎

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,10 @@
1-
import { ExtensionItem } from "@/components/layouts/Extensions";
1+
import ExtensionItem from "@/components/ui/extension-item";
22
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
33
import { EXTENSIONS, FUTURE_EXTENSIONS } from "@/data/extensions";
44

55
import Link from "next/link";
66

7-
export const ExtensionsAvatarGroup = () => {
8-
return (
9-
<div className="flex -space-x-4">
10-
{FUTURE_EXTENSIONS.map((extension) => (
11-
<Avatar key={extension.name} className="size-14 bg-secondary p-3">
12-
<AvatarImage src={extension.icon} alt={extension.name} />
13-
<AvatarFallback>{extension.shortcut_name}</AvatarFallback>
14-
</Avatar>
15-
))}
16-
</div>
17-
);
18-
};
19-
20-
const ExtensionsPage = () => {
7+
export default function ExtensionsPage() {
218
return (
229
<section>
2310
<div className="wrapper py-8 space-y-8">
@@ -39,9 +26,20 @@ const ExtensionsPage = () => {
3926
</div>
4027
</section>
4128
);
42-
};
29+
}
4330

44-
export default ExtensionsPage;
31+
function ExtensionsAvatarGroup() {
32+
return (
33+
<div className="flex -space-x-4">
34+
{FUTURE_EXTENSIONS.map((extension) => (
35+
<Avatar key={extension.name} className="size-14 bg-secondary p-3">
36+
<AvatarImage src={extension.icon} alt={extension.name} />
37+
<AvatarFallback>{extension.shortcut_name}</AvatarFallback>
38+
</Avatar>
39+
))}
40+
</div>
41+
);
42+
}
4543

4644
/**
4745
* 📦 Official Extensions

‎src/app/globals.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,10 @@
140140
@apply max-w-4xl w-full mx-auto px-4;
141141
}
142142

143+
.wrapper-2xs {
144+
@apply max-w-2xl w-full mx-auto px-4;
145+
}
146+
143147
.wrapper-lg {
144148
@apply max-w-[90rem] w-full mx-auto px-4;
145149
}

‎src/app/page.tsx‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,15 @@
11
import { FeaturedExtensions } from "@/components/layouts/Extensions";
22
import Features from "@/components/layouts/Features";
33
import Hero from "@/components/layouts/Hero";
4-
// import Image from "next/image";
5-
// import Link from "next/link";
4+
import Sponsor from "@/components/layouts/Sponsor";
65

76
export default function Home() {
87
return (
98
<>
109
<Hero />
1110
<Features />
1211
<FeaturedExtensions />
13-
{/* <div className="wrapper">
14-
<Link href="https://ko-fi.com/D1D217QALD" target="_blank">
15-
<Image
16-
width={100}
17-
height={36}
18-
src="https://storage.ko-fi.com/cdn/kofi3.png?v=6"
19-
alt="Buy Me a Coffee at ko-fi.com"
20-
/>
21-
</Link>
22-
</div> */}
12+
<Sponsor />
2313
</>
2414
);
2515
}

‎src/app/snippets/page.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
const SnippetsPage = () => {
1+
export default function SnippetsPage() {
22
// This is for showing all the snippets
33
return <h1>Hello</h1>;
4-
};
5-
6-
export default SnippetsPage;
4+
}

‎src/components/layouts/Extensions.tsx‎

Lines changed: 1 addition & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
1+
import Link from "next/link";
12
import { EXTENSIONS } from "@/data/extensions";
23
import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
3-
import Image from "next/image";
44
import { Button } from "../ui/button";
5-
import Link from "next/link";
6-
import type { ExtensionType } from "@/types";
75

86
export const FeaturedExtensions = () => {
97
return (
@@ -27,43 +25,3 @@ export const FeaturedExtensions = () => {
2725
</section>
2826
);
2927
};
30-
31-
export const ExtensionItem = ({ extension }: { extension: ExtensionType }) => {
32-
return (
33-
<li className="bg-secondary space-y-4 p-6 rounded-lg text-secondary-foreground h-full">
34-
<div className="grid grid-cols-[auto_1fr] items-center gap-4">
35-
<div className="bg-primary p-4 rounded-lg">
36-
<Image
37-
src={extension.icon}
38-
alt=""
39-
aria-hidden="true"
40-
width={40}
41-
height={40}
42-
/>
43-
</div>
44-
<div className="space-y-1">
45-
<h3 className="text-2xl font-bold">{extension.name}</h3>
46-
<p className="text-muted-foreground">
47-
<strong>Downloads: </strong>
48-
{new Intl.NumberFormat().format(extension.downloads)}
49-
</p>
50-
</div>
51-
</div>
52-
<p>{extension.description}</p>
53-
<div className="flex flex-wrap gap-4">
54-
<Button asChild>
55-
<Link href={extension.guide_url}>Guide</Link>
56-
</Button>
57-
<Button asChild variant="outline">
58-
<Link
59-
href={extension.source_url}
60-
target="_blank"
61-
rel="noopener noreferrer"
62-
>
63-
Source
64-
</Link>
65-
</Button>
66-
</div>
67-
</li>
68-
);
69-
};

‎src/components/layouts/Features.tsx‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
Book,
77
PlusCircle,
88
} from "lucide-react";
9+
import { Card, CardContent, CardHeader } from "../ui/card";
910

1011
const features = [
1112
{
@@ -45,13 +46,17 @@ export default function Features() {
4546
<div className="wrapper">
4647
<ul className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
4748
{features.map((item, idx) => (
48-
<li key={idx} className="space-y-3 rounded-xl bg-card p-6">
49-
<div className="text-accent w-fit transform-gpu rounded-full bg-background p-4">
50-
{item.icon}
51-
</div>
52-
<h4 className="text-lg font-bold">{item.title}</h4>
53-
<p className="text-muted-foreground">{item.desc}</p>
54-
</li>
49+
<Card key={idx}>
50+
<CardHeader>
51+
<div className="text-accent w-fit transform-gpu rounded-full bg-background p-4">
52+
{item.icon}
53+
</div>
54+
</CardHeader>
55+
<CardContent>
56+
<h4 className="text-lg font-bold">{item.title}</h4>
57+
<p className="text-muted-foreground">{item.desc}</p>
58+
</CardContent>
59+
</Card>
5560
))}
5661
</ul>
5762
</div>

‎src/components/layouts/Sponsor.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import Image from "next/image";
2+
import Link from "next/link";
3+
import {
4+
Card,
5+
CardDescription,
6+
CardFooter,
7+
CardHeader,
8+
CardTitle,
9+
} from "@/components/ui/card";
10+
11+
export default function Sponsor() {
12+
return (
13+
<div className="wrapper-xs pt-4 pb-12">
14+
<Card className="grid md:grid-cols-[1fr_auto]">
15+
<CardHeader>
16+
<CardTitle className="text-xl font-bold">
17+
Support the project
18+
</CardTitle>
19+
<CardDescription>
20+
And get a special <strong>💖 Prime Supporter</strong> role in our
21+
Discord server.
22+
</CardDescription>
23+
</CardHeader>
24+
<CardFooter>
25+
<Link href="https://ko-fi.com/D1D217QALD" target="_blank">
26+
<Image
27+
width={200}
28+
height={80}
29+
className="mx-auto"
30+
src="/images/kofi-button.png"
31+
alt="Buy Me a Coffee at ko-fi.com"
32+
/>
33+
</Link>
34+
</CardFooter>
35+
</Card>
36+
</div>
37+
);
38+
}

‎src/components/ui/card.tsx‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import * as React from "react"
2+
3+
import { cn } from "@/lib/utils"
4+
5+
function Card({ className, ...props }: React.ComponentProps<"div">) {
6+
return (
7+
<div
8+
data-slot="card"
9+
className={cn(
10+
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
11+
className
12+
)}
13+
{...props}
14+
/>
15+
)
16+
}
17+
18+
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
19+
return (
20+
<div
21+
data-slot="card-header"
22+
className={cn(
23+
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
24+
className
25+
)}
26+
{...props}
27+
/>
28+
)
29+
}
30+
31+
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
32+
return (
33+
<div
34+
data-slot="card-title"
35+
className={cn("leading-none font-semibold", className)}
36+
{...props}
37+
/>
38+
)
39+
}
40+
41+
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
42+
return (
43+
<div
44+
data-slot="card-description"
45+
className={cn("text-muted-foreground text-sm", className)}
46+
{...props}
47+
/>
48+
)
49+
}
50+
51+
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
52+
return (
53+
<div
54+
data-slot="card-action"
55+
className={cn(
56+
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
57+
className
58+
)}
59+
{...props}
60+
/>
61+
)
62+
}
63+
64+
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
65+
return (
66+
<div
67+
data-slot="card-content"
68+
className={cn("px-6", className)}
69+
{...props}
70+
/>
71+
)
72+
}
73+
74+
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
75+
return (
76+
<div
77+
data-slot="card-footer"
78+
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
79+
{...props}
80+
/>
81+
)
82+
}
83+
84+
export {
85+
Card,
86+
CardHeader,
87+
CardFooter,
88+
CardTitle,
89+
CardAction,
90+
CardDescription,
91+
CardContent,
92+
}

0 commit comments

Comments
 (0)