Skip to content

Commit e40411f

Browse files
ariflogsariflogs
authored
Merge pull request #11 from ariflogs/docs-site
Docs site
2 parents 79602d6 + 27fad84 commit e40411f

26 files changed

+407
-10
lines changed

‎CONTRIBUTING.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
> ⚠️ This guide is old and may not be still relevant! I'll update this soon. 🙏
2+
13
# Contributing to RetroUI
24

35
Thank you for your interest in contributing to RetroUI 🙏. I hope this guide to help you get started.

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

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import React from "react";
22
import { allDocs } from "contentlayer/generated";
33
import { notFound } from "next/navigation";
4-
import {format} from "date-fns"
4+
import { format } from "date-fns";
55
import MDX from "@/components/MDX";
6-
import { H1, H2, H3, H4 } from "@/packages/ui";
6+
import { H2 } from "@/packages/ui";
77

8-
async function getDocParams(slug: string) {
8+
function getDocParams(slug: string) {
9+
console.log(slug);
910
const doc = allDocs.find((doc) => doc.url === slug);
1011

1112
if (!doc) {
@@ -15,9 +16,9 @@ async function getDocParams(slug: string) {
1516
return doc;
1617
}
1718

18-
export default async function page({ params }: { params: { slug: string[] } }) {
19-
const slug = params.slug?.join("/") || "/docs";
20-
const doc = await getDocParams(slug);
19+
export default function page({ params }: { params: { slug: string[] } }) {
20+
const slug = `/docs${params.slug ? `/${params.slug.join("/")}` : ""}`;
21+
const doc = getDocParams(slug);
2122

2223
if (!doc) {
2324
return notFound();
@@ -32,7 +33,9 @@ export default async function page({ params }: { params: { slug: string[] } }) {
3233
<div>
3334
<MDX code={doc.body.code} />
3435
</div>
35-
<p className="text-right">Last Updated: {format(doc.lastUpdated, "dd MMM, YYY")}</p>
36+
<p className="text-right">
37+
Last Updated: {format(doc.lastUpdated, "dd MMM, yyy")}
38+
</p>
3639
</div>
3740
);
3841
}

‎components/ComponentShowcase.tsx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { componentConfig } from "@/config";
2+
import { H5 } from "@/packages/ui";
3+
import React, { HTMLAttributes } from "react";
4+
5+
interface IComponentShowcase extends HTMLAttributes<HTMLDivElement> {
6+
name: keyof typeof componentConfig.registry;
7+
}
8+
9+
export function ComponentShowcase({ name }: IComponentShowcase) {
10+
const { preview: Preview, codeHtml } = componentConfig.registry[name];
11+
return (
12+
<div className="space-y-6">
13+
<div>
14+
<H5>Preview</H5>
15+
<div className="mt-2 border rounded p-6">
16+
<Preview />
17+
</div>
18+
</div>
19+
20+
<div>
21+
<H5>Code</H5>
22+
<div className="mt-2 border relative rounded p-6 bg-[#222222] text-zinc-200 overflow-auto">
23+
<code>
24+
<pre>{codeHtml}</pre>
25+
</code>
26+
</div>
27+
</div>
28+
</div>
29+
);
30+
}

‎components/MDX.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import { H1, H2, H3, H4, H5, H6 } from "@/packages/ui";
22
import { useMDXComponent } from "next-contentlayer/hooks";
3-
import React from "react";
3+
import React, { HTMLAttributes } from "react";
44

55
const components = {
66
h1: H1,
7-
h2: H2,
7+
h2: (props: HTMLAttributes<HTMLHeadingElement>) => (
8+
<H2 className="mb-2" {...props} />
9+
),
810
h3: H3,
911
h4: H4,
1012
h5: H5,

‎components/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./ComponentShowcase"

‎config/components.ts

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
import { lazy } from "react";
2+
3+
export const componentConfig = {
4+
registry: {
5+
"accordion-style-default": {
6+
name: "accordion-style-default",
7+
preview: lazy(
8+
() => import("@/preview/components/accordion-style-default")
9+
),
10+
codeHtml: `<div class="space-y-4 mx-auto">
11+
<details class="border-2 border-black shadow-md hover:shadow-sm transition-all overflow-hidden">
12+
<summary class="px-4 py-2 font-head text-black cursor-pointer focus:outline-none">
13+
Accordion Item 1
14+
</summary>
15+
<div class="px-4 py-2 font-body bg-white text-gray-700">
16+
This is the content of the first accordion item. It is styled with
17+
Tailwind CSS.
18+
</div>
19+
</details>
20+
21+
<details class="border-2 border-black shadow-md hover:shadow-sm transition-all overflow-hidden">
22+
<summary class="px-4 py-2 font-head text-black cursor-pointer focus:outline-none">
23+
Accordion Item 2
24+
</summary>
25+
<div class="px-4 py-2 font-body bg-white text-gray-700">
26+
This is the content of the second accordion item. It has a similar
27+
style to maintain consistency.
28+
</div>
29+
</details>
30+
31+
<details class="border-2 border-black shadow-md hover:shadow-sm transition-all overflow-hidden">
32+
<summary class="px-4 py-2 font-head text-black cursor-pointer focus:outline-none">
33+
Accordion Item 3
34+
</summary>
35+
<div class="px-4 py-2 font-body bg-white text-gray-700">
36+
This is the content of the third accordion item. The details element
37+
handles the toggle behavior.
38+
</div>
39+
</details>
40+
</div>`,
41+
},
42+
"avatar-style-circle": {
43+
name: "avatar-style-circle",
44+
preview: lazy(() => import("@/preview/components/avatar-style-circle")),
45+
codeHtml: `<div className="inline-block w-14 h-14 border-2 border-black rounded-full overflow-hidden">
46+
<img
47+
className="w-full h-full"
48+
src="https://pagedone.io/asset/uploads/1704275541.png"
49+
alt="Rounded Avatar"
50+
/>
51+
</div>`,
52+
},
53+
"badge-style-default": {
54+
name: "badge-style-default",
55+
preview: lazy(() => import("@/preview/components/badge-style-default")),
56+
codeHtml: `<span className="border-black text-black border-2 px-2 py-1 text-sm">
57+
Badge
58+
</span>`,
59+
},
60+
"button-style-default": {
61+
name: "button-style-default",
62+
preview: lazy(() => import("@/preview/components/button-style-default")),
63+
codeHtml: `<button className="bg-primary-400 text-black px-6 py-2 text-base font-head border-2 border-black shadow-md hover:shadow-xs hover:bg-primary-500 transition-all">
64+
Click Me!
65+
</button>`,
66+
},
67+
"card-style-default": {
68+
name: "card-style-default",
69+
preview: lazy(() => import("@/preview/components/card-style-default")),
70+
codeHtml: `<div className="inline-block border-2 border-black p-4 shadow-md cursor-pointer transition-all hover:shadow-xs">
71+
<h4 className="font-head text-2xl font-medium mb-1">This is card Title</h4>
72+
<p>This is card description.</p>
73+
</div>`,
74+
},
75+
"input-style-default": {
76+
name: "input-style-default",
77+
preview: lazy(() => import("@/preview/components/input-style-default")),
78+
codeHtml: `<input
79+
type="text"
80+
placeholder="type something..."
81+
className="px-4 py-2 w-full border-2 border-black shadow-md transition focus:outline-none focus:shadow-xs"
82+
/>`,
83+
},
84+
"typography-headings": {
85+
name: "typography-headings",
86+
preview: lazy(() => import("@/preview/components/typography-headings")),
87+
codeHtml: `<div className="space-y-4">
88+
<h1 className="font-head text-5xl lg:text-6xl font-bold">This is H1</h1>
89+
<h2 className="font-head text-4xl font-semibold">This is H2</h2>
90+
<h3 className="font-head text-2xl font-semibold">This is H3</h3>
91+
<h4 className="font-head text-xl font-medium">This is H4</h4>
92+
<h5 className="font-head text-lg font-medium">This is H5</h5>
93+
<h6 className="font-head font-medium">This is H6</h6>
94+
</div>`,
95+
},
96+
"typography-p": {
97+
name: "typography-p",
98+
preview: lazy(() => import("@/preview/components/typography-p")),
99+
codeHtml: `<p className="font-sans">
100+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat eos,
101+
doloremque inventore nesciunt quo sequi veniam impedit alias libero
102+
dolorem tempore quia esse fugit fuga iste aliquam expedita molestias
103+
iusto?
104+
</p>`,
105+
},
106+
},
107+
};

‎config/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from "./components";
2+
export * from "./navigation";

‎content/docs/components/accordion.mdx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
title: Default Accordion
3+
description: This collapsible component let's your users read only the content they care about. 😌
4+
lastUpdated: 30 Sep, 2024
5+
---
6+
7+
import {ComponentShowcase} from "@/components"
8+
9+
<ComponentShowcase name="accordion-style-default" />

‎content/docs/components/avatar.mdx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
title: Default Avatar
3+
description: Default rounded avatar that can show your users profile picture. ✨
4+
lastUpdated: 30 Sep, 2024
5+
---
6+
7+
import {ComponentShowcase} from "@/components"
8+
9+
<ComponentShowcase name="avatar-style-circle" />

‎content/docs/components/badge.mdx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
title: Default Badge
3+
description: The component that looks like a button that's not clickable!
4+
lastUpdated: 30 Sep, 2024
5+
---
6+
7+
import {ComponentShowcase} from "@/components"
8+
9+
<ComponentShowcase name="badge-style-default" />

0 commit comments

Comments
 (0)