Skip to content

Commit a597f6f

Browse files
mehdibhamehdibha
committed
fix: fix multiple files in preview component
1 parent 9a1a10f commit a597f6f

22 files changed

+26
-138
lines changed

‎content/pages/about.mdx

-5
This file was deleted.

‎content/pages/account.mdx

-5
This file was deleted.

‎content/pages/landing.mdx

-5
This file was deleted.

‎content/pages/login.mdx

-5
This file was deleted.

‎content/pages/register.mdx

-5
This file was deleted.

‎scripts/build-previews.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -56,9 +56,11 @@ allPreviews.forEach(({ relativePath }) => {
5656
const files = fs.readdirSync(fullPath);
5757
code = files.map((file) => {
5858
const filePath = path.join(fullPath, file);
59-
const ext = path.extname(file);
6059
const fileContent = fs.readFileSync(filePath, "utf-8");
61-
return { title: `${file}.${ext}`, code: fileContent };
60+
return {
61+
title: file === "index.tsx" ? `${path.basename(fullPath)}.tsx` : file,
62+
code: fileContent,
63+
};
6264
});
6365
} else {
6466
// if file, get file content and name

‎src/autogenerated/previews.ts

+4-45
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export const previews = {
2626
code: [
2727
{
2828
title: "demo.tsx",
29-
code: '"use client";\r\n\r\nimport {\r\n BatteryChargingIcon,\r\n BatteryFullIcon,\r\n BatteryLowIcon,\r\n BatteryMediumIcon,\r\n BatteryWarning,\r\n Loader2Icon,\r\n} from "lucide-react";\r\nimport { useBattery } from "@/lib/hooks/use-battery";\r\n\r\nexport default function Demo() {\r\n const { isLoading, isSupported, isCharging, level } = useBattery();\r\n\r\n const size = 120;\r\n\r\n return (\r\n <div className="text-center">\r\n <h2 className="text-xl font-semibold">Battery status</h2>\r\n <div className="mt-4 flex items-center justify-center space-x-4">\r\n {isLoading ? (\r\n <Loader2Icon className="animate-spin" />\r\n ) : !isSupported ? (\r\n <p className="text-muted-foreground">\r\n Battery status API is not supported in your browser.\r\n </p>\r\n ) : (\r\n <>\r\n <span className="text-5xl font-bold">{level * 100}%</span>\r\n {isCharging ? (\r\n <BatteryChargingIcon size={size} />\r\n ) : level === 1 ? (\r\n <BatteryFullIcon size={size} />\r\n ) : level > 0.5 ? (\r\n <BatteryMediumIcon size={size} />\r\n ) : level > 0.2 ? (\r\n <BatteryLowIcon size={size} />\r\n ) : (\r\n <BatteryWarning size={size} />\r\n )}{" "}\r\n </>\r\n )}\r\n </div>\r\n </div>\r\n );\r\n}\r\n',
29+
code: '"use client";\r\n\r\nimport {\r\n BatteryChargingIcon,\r\n BatteryFullIcon,\r\n BatteryLowIcon,\r\n BatteryMediumIcon,\r\n BatteryWarning,\r\n Loader2Icon,\r\n} from "lucide-react";\r\nimport { useBattery } from "@/lib/hooks/use-battery";\r\n\r\nexport default function Demo() {\r\n const { isLoading, isSupported, isCharging, level } = useBattery();\r\n\r\n const size = 120;\r\n\r\n return (\r\n <div className="text-center">\r\n <h2 className="text-xl font-semibold">Battery status</h2>\r\n <div className="mt-4 flex items-center justify-center space-x-4">\r\n {isLoading ? (\r\n <Loader2Icon className="animate-spin" />\r\n ) : !isSupported ? (\r\n <p className="text-muted-foreground">\r\n Battery status API is not supported in your browser.\r\n </p>\r\n ) : (\r\n <>\r\n <span className="text-5xl font-bold">{level * 100}%</span>\r\n {isCharging ? (\r\n <BatteryChargingIcon size={size} />\r\n ) : level === 1 ? (\r\n <BatteryFullIcon size={size} />\r\n ) : level > 0.5 ? (\r\n <BatteryMediumIcon size={size} />\r\n ) : level > 0.2 ? (\r\n <BatteryLowIcon size={size} />\r\n ) : (\r\n <BatteryWarning size={size} />\r\n )}\r\n </>\r\n )}\r\n </div>\r\n </div>\r\n );\r\n}\r\n',
3030
},
3131
],
3232
},
@@ -39,57 +39,16 @@ export const previews = {
3939
},
4040
],
4141
},
42-
"pages/about": {
43-
component: React.lazy<React.FC>(() => import("@/lib/pages/about")),
44-
code: [
45-
{
46-
title: "about.tsx",
47-
code: 'export default function About() {\r\n return (\r\n <div className="min-h-screen">\r\n <h1>About</h1>\r\n <p>\r\n This is a simple example of a Next.js app with a custom routing solution that uses\r\n the file system to define routes.\r\n </p>\r\n </div>\r\n );\r\n}\r\n',
48-
},
49-
],
50-
},
51-
"pages/account": {
52-
component: React.lazy<React.FC>(() => import("@/lib/pages/account")),
53-
code: [
54-
{
55-
title: "account.tsx",
56-
code: 'export default function Account() {\r\n return (\r\n <div className="min-h-screen">\r\n <h1>Account</h1>\r\n <p>\r\n This is a simple example of a Next.js app with a custom routing solution that uses\r\n the file system to define routes.\r\n </p>\r\n </div>\r\n );\r\n}\r\n',
57-
},
58-
],
59-
},
60-
"pages/landing": {
61-
component: React.lazy<React.FC>(() => import("@/lib/pages/landing")),
62-
code: [
63-
{
64-
title: "landing.tsx",
65-
code: 'export default function Landing() {\r\n return (\r\n <div className="min-h-screen">\r\n <h1>Landing</h1>\r\n <p>\r\n This is a simple example of a Next.js app with a custom routing solution that uses\r\n the file system to define routes.\r\n </p>\r\n </div>\r\n );\r\n}\r\n',
66-
},
67-
],
68-
},
69-
"pages/login": {
70-
component: React.lazy<React.FC>(() => import("@/lib/pages/login")),
71-
code: [
72-
{
73-
title: "login.tsx",
74-
code: 'export default function Login() {\r\n return (\r\n <div className="min-h-screen">\r\n <h1>Login</h1>\r\n <p>\r\n This is a simple example of a Next.js app with a custom routing solution that uses\r\n the file system to define routes.\r\n </p>\r\n </div>\r\n );\r\n}\r\n',
75-
},
76-
],
77-
},
7842
"pages/pricing": {
7943
component: React.lazy<React.FC>(() => import("@/lib/pages/pricing")),
8044
code: [
8145
{
8246
title: "pricing.tsx",
83-
code: 'export default function Pricing() {\r\n return (\r\n <div className="min-h-screen">\r\n <h1>Pricing</h1>\r\n <p>\r\n This is a simple example of a Next.js app with a custom routing solution that uses\r\n the file system to define routes.\r\n </p>\r\n </div>\r\n );\r\n}\r\n',
47+
code: 'import { PricingPlan } from "./pricing-plan";\r\n\r\nexport default function Pricing() {\r\n return (\r\n <div className="min-h-screen">\r\n <h1>Pricing</h1>\r\n <p>\r\n This is a simple example of a Next.js app with a custom routing solution that uses\r\n the file system to define routes.\r\n </p>\r\n <PricingPlan />\r\n </div>\r\n );\r\n}\r\n',
8448
},
85-
],
86-
},
87-
"pages/register": {
88-
component: React.lazy<React.FC>(() => import("@/lib/pages/register")),
89-
code: [
9049
{
91-
title: "register.tsx",
92-
code: 'export default function Register() {\r\n return (\r\n <div className="min-h-screen">\r\n <h1>Register</h1>\r\n <p>\r\n This is a simple example of a Next.js app with a custom routing solution that uses\r\n the file system to define routes.\r\n </p>\r\n </div>\r\n );\r\n}\r\n',
50+
title: "pricing-plan.tsx",
51+
code: "export const PricingPlan = () => {\r\n return <div>pricing plan</div>;\r\n};\r\n",
9352
},
9453
],
9554
},

‎src/components/mdx/client.tsx ‎src/components/code-highlighter/client.tsx

File renamed without changes.

‎src/components/mdx/code-tabs.tsx ‎src/components/code-highlighter/code-tabs.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { Code, type Extension, type BrightProps } from "bright";
2-
import { CopyButton } from "../copy-button";
32
import { TabsRoot, TabsContent, TabsList } from "./client";
3+
import { CopyButton } from "./copy-button";
44

5-
const title: Extension = {
5+
export const title: Extension = {
66
name: "title",
77
beforeHighlight: (props, annotations) => {
88
if (annotations.length > 0) {

‎src/components/copy-button.tsx ‎src/components/code-highlighter/copy-button.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export const CopyButton = ({ code, className }: { code: string; className?: stri
1414
setCopied(false);
1515
}, 2000);
1616
};
17+
1718
return (
1819
<Button
1920
variant="secondary"

‎src/components/mdx/pre-wrapper-extension.tsx ‎src/components/code-highlighter/pre-wrapper-extension.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Code, type BrightProps, type Extension } from "bright";
2-
import { CopyButton } from "../copy-button";
3-
import { ScrollArea } from "../ui/scroll-area";
2+
import { ScrollArea } from "@/components/ui/scroll-area";
3+
import { CopyButton } from "./copy-button";
44

55
export const preWrapper: Extension = {
66
name: "preWrapper",

‎src/components/component-preview.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from "react";
22
import { Code } from "bright";
3+
import { tabs } from "@/components/code-highlighter/code-tabs";
34
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
45
import { previews } from "@/autogenerated/previews";
5-
import { preWrapper } from "./mdx/pre-wrapper-extension";
66
import { ScrollArea } from "./ui/scroll-area";
77

88
type PreviewsKeys = keyof typeof previews;
@@ -56,7 +56,7 @@ export const ComponentPreview = ({ name }: { name: PreviewsKeys }) => {
5656
style={{ marginTop: 0, marginBottom: 0 }}
5757
theme="github-dark-dimmed"
5858
codeClassName="text-xs min-h-[318px]"
59-
extensions={[preWrapper]}
59+
extensions={[tabs]}
6060
></Code>
6161
</ScrollArea>
6262
</TabsContent>

‎src/components/mdx/mdx-components.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import type { ComponentProps } from "react";
22
import NavLink from "next/link";
33
import { Code } from "bright";
4+
import { CodeTabs } from "@/components/code-highlighter/code-tabs";
5+
import { preWrapper } from "@/components/code-highlighter/pre-wrapper-extension";
46
import { ComponentPreview } from "@/components/component-preview";
57
import { IconsExplorer } from "@/components/icons-explorer";
68
import { cn } from "@/utils/classes";
7-
import { CodeTabs } from "./code-tabs";
8-
import { preWrapper } from "./pre-wrapper-extension";
99

1010
export const Link = ({
1111
className,

‎src/config/site-config.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,10 @@ export const siteConfig = {
2929
header: {
3030
nav: {
3131
links: [
32-
{ href: "/components", label: "Components", disabled: true },
32+
{ href: "/components", label: "Components" },
3333
{ href: "/hooks", label: "Hooks" },
3434
{ href: "/icons", label: "Icons" },
35-
{ href: "/pages", label: "Pages", disabled: true },
35+
{ href: "/pages", label: "Pages" },
3636
{ href: "/templates", label: "Templates" },
3737
],
3838
},

‎src/lib/hooks/use-battery/demo.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export default function Demo() {
3838
<BatteryLowIcon size={size} />
3939
) : (
4040
<BatteryWarning size={size} />
41-
)}{" "}
41+
)}
4242
</>
4343
)}
4444
</div>

‎src/lib/pages/about.tsx

-11
This file was deleted.

‎src/lib/pages/account.tsx

-11
This file was deleted.

‎src/lib/pages/landing.tsx

-11
This file was deleted.

‎src/lib/pages/login.tsx

-11
This file was deleted.

‎src/lib/pages/pricing.tsx ‎src/lib/pages/pricing/index.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { PricingPlan } from "./pricing-plan";
2+
13
export default function Pricing() {
24
return (
35
<div className="min-h-screen">
@@ -6,6 +8,7 @@ export default function Pricing() {
68
This is a simple example of a Next.js app with a custom routing solution that uses
79
the file system to define routes.
810
</p>
11+
<PricingPlan />
912
</div>
1013
);
1114
}

‎src/lib/pages/pricing/pricing-plan.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export const PricingPlan = () => {
2+
return <div>pricing plan</div>;
3+
};

‎src/lib/pages/register.tsx

-11
This file was deleted.

0 commit comments

Comments
 (0)