Skip to content

Commit c010ded

Browse files
ariflogsariflogs
committed
code preview option
1 parent 8f6a325 commit c010ded

File tree

14 files changed

+265
-8
lines changed

14 files changed

+265
-8
lines changed

‎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>
13+
<div>
14+
<H5>Preview</H5>
15+
<div className="border rounded p-6">
16+
<Preview />
17+
</div>
18+
</div>
19+
20+
<div>
21+
<H5>Code</H5>
22+
<div className="border relative rounded p-4 bg-[#222222] text-zinc-200">
23+
<code>
24+
<pre>{codeHtml}</pre>
25+
</code>
26+
</div>
27+
</div>
28+
</div>
29+
);
30+
}

‎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: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
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-round": {
43+
name: "avatar-style-round",
44+
preview: lazy(() => import("@/preview/components/avatar-style-round")),
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/badge-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+
},
85+
};

‎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" />

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@
1515
"next": "14.2.7",
1616
"next-contentlayer": "^0.3.4",
1717
"react": "^18",
18-
"react-dom": "^18"
18+
"react-dom": "^18",
19+
"react-element-to-jsx-string": "^15.0.0"
1920
},
2021
"devDependencies": {
2122
"@types/node": "^20",

‎pnpm-lock.yaml‎

Lines changed: 33 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎preview/components/accordion-style-default.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from "react";
2+
3+
export default function AccordionStyleDefault() {
4+
return (
5+
<div className="space-y-4 mx-auto">
6+
<details className="border-2 border-black shadow-md hover:shadow-sm transition-all overflow-hidden">
7+
<summary className="px-4 py-2 font-head text-black cursor-pointer focus:outline-none">
8+
Accordion Item 1
9+
</summary>
10+
<div className="px-4 py-2 font-body bg-white text-gray-700">
11+
This is the content of the first accordion item. It is styled with
12+
Tailwind CSS.
13+
</div>
14+
</details>
15+
16+
<details className="border-2 border-black shadow-md hover:shadow-sm transition-all overflow-hidden">
17+
<summary className="px-4 py-2 font-head text-black cursor-pointer focus:outline-none">
18+
Accordion Item 2
19+
</summary>
20+
<div className="px-4 py-2 font-body bg-white text-gray-700">
21+
This is the content of the second accordion item. It has a similar
22+
style to maintain consistency.
23+
</div>
24+
</details>
25+
26+
<details className="border-2 border-black shadow-md hover:shadow-sm transition-all overflow-hidden">
27+
<summary className="px-4 py-2 font-head text-black cursor-pointer focus:outline-none">
28+
Accordion Item 3
29+
</summary>
30+
<div className="px-4 py-2 font-body bg-white text-gray-700">
31+
This is the content of the third accordion item. The details element
32+
handles the toggle behavior.
33+
</div>
34+
</details>
35+
</div>
36+
);
37+
}
38+
39+
AccordionStyleDefault.displayName = "AccordionStyleDefault";

‎preview/components/avatar-style-round.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from "react";
2+
3+
export default function AvatarStyleRounded() {
4+
return (
5+
<div className="inline-block w-14 h-14 border-2 border-black rounded-full overflow-hidden">
6+
<img
7+
className="w-full h-full"
8+
src="https://pagedone.io/asset/uploads/1704275541.png"
9+
alt="Rounded Avatar"
10+
/>
11+
</div>
12+
);
13+
}

0 commit comments

Comments
 (0)