From 187c74489a9ecdae3ebf6358a282c6a0ef75be41 Mon Sep 17 00:00:00 2001 From: Beniamin Marcu Date: Tue, 19 Nov 2024 12:33:32 +0200 Subject: [PATCH 01/29] wip: test code render --- apps/site/next.config.js | 10 + apps/site/package.json | 1 + .../public/accordion/accordion-all-open.tsx | 16 + .../accordion/accordion-custom-icon.tsx | 22 ++ .../accordion/accordion-custom-styles.tsx | 16 + .../site/public/accordion/accordion-demo.html | 153 +++++++++ apps/site/public/accordion/accordion-demo.tsx | 166 +++++++++ .../public/accordion/accordion-disabled.tsx | 16 + .../public/accordion/controlled-accordion.tsx | 21 ++ apps/site/public/accordion/index.ts | 7 + apps/site/src/app/api/code/route.ts | 24 ++ apps/site/src/app/docs/[...slug]/page.tsx | 7 +- apps/site/src/app/docs/content/html/test.mdx | 22 ++ apps/site/src/components/CodeSnippet.tsx | 28 ++ apps/site/src/components/ComponentPreview.tsx | 21 ++ .../accordion/accordion-all-open.tsx | 179 +--------- .../accordion/accordion-custom-icon.tsx | 22 ++ .../accordion/accordion-custom-styles.tsx | 16 + .../docs-html/accordion/accordion-demo.tsx | 317 +++++++++--------- .../accordion/accordion-disabled.tsx | 16 + .../accordion/controlled-accordion.tsx | 21 ++ .../components/docs-html/accordion/index.ts | 7 +- .../docs/accordion/accordion-all-open.tsx | 2 +- .../docs/accordion/accordion-demo.tsx | 2 +- apps/site/src/components/index.ts | 2 +- apps/site/tsconfig.json | 2 +- 26 files changed, 783 insertions(+), 333 deletions(-) create mode 100644 apps/site/public/accordion/accordion-all-open.tsx create mode 100644 apps/site/public/accordion/accordion-custom-icon.tsx create mode 100644 apps/site/public/accordion/accordion-custom-styles.tsx create mode 100644 apps/site/public/accordion/accordion-demo.html create mode 100644 apps/site/public/accordion/accordion-demo.tsx create mode 100644 apps/site/public/accordion/accordion-disabled.tsx create mode 100644 apps/site/public/accordion/controlled-accordion.tsx create mode 100644 apps/site/public/accordion/index.ts create mode 100644 apps/site/src/app/api/code/route.ts create mode 100644 apps/site/src/app/docs/content/html/test.mdx create mode 100644 apps/site/src/components/CodeSnippet.tsx create mode 100644 apps/site/src/components/ComponentPreview.tsx create mode 100644 apps/site/src/components/docs-html/accordion/accordion-custom-icon.tsx create mode 100644 apps/site/src/components/docs-html/accordion/accordion-custom-styles.tsx create mode 100644 apps/site/src/components/docs-html/accordion/accordion-disabled.tsx create mode 100644 apps/site/src/components/docs-html/accordion/controlled-accordion.tsx diff --git a/apps/site/next.config.js b/apps/site/next.config.js index 697e656df..934fe16f3 100644 --- a/apps/site/next.config.js +++ b/apps/site/next.config.js @@ -86,6 +86,16 @@ const nextConfig = { }, ]; }, + webpack: { + configure: (webpackConfig) => { + webpackConfig.module.rules.push({ + test: /\.(ts|tsx)$/, + loader: 'ts-loader', + options: { transpileOnly: true }, + }); + return webpackConfig; + }, + }, }; module.exports = nextConfig; diff --git a/apps/site/package.json b/apps/site/package.json index 8ef33c2f4..d5d33ec24 100644 --- a/apps/site/package.json +++ b/apps/site/package.json @@ -36,6 +36,7 @@ "next-mdx-remote": "5.0.0", "next-nprogress-bar": "2.3.13", "next-themes": "0.2.1", + "raw-loader": "4.0.2", "react": "18.2.0", "react-apexcharts": "1.4.1", "react-day-picker": "8.10.0", diff --git a/apps/site/public/accordion/accordion-all-open.tsx b/apps/site/public/accordion/accordion-all-open.tsx new file mode 100644 index 000000000..5251bbb3d --- /dev/null +++ b/apps/site/public/accordion/accordion-all-open.tsx @@ -0,0 +1,16 @@ +export function AccordionAllOpen() { + return ( + <> +
+
+
+ + + ) +} \ No newline at end of file diff --git a/apps/site/public/accordion/accordion-custom-icon.tsx b/apps/site/public/accordion/accordion-custom-icon.tsx new file mode 100644 index 000000000..32e8c9d07 --- /dev/null +++ b/apps/site/public/accordion/accordion-custom-icon.tsx @@ -0,0 +1,22 @@ +export function AccordionCustomIcon() { + return ( + <> +
+
+
+ + + ) +} \ No newline at end of file diff --git a/apps/site/public/accordion/accordion-custom-styles.tsx b/apps/site/public/accordion/accordion-custom-styles.tsx new file mode 100644 index 000000000..584065b44 --- /dev/null +++ b/apps/site/public/accordion/accordion-custom-styles.tsx @@ -0,0 +1,16 @@ +export function AccordionCustomStyles() { + return ( + <> +
+
+
+ + + ) +} \ No newline at end of file diff --git a/apps/site/public/accordion/accordion-demo.html b/apps/site/public/accordion/accordion-demo.html new file mode 100644 index 000000000..452593603 --- /dev/null +++ b/apps/site/public/accordion/accordion-demo.html @@ -0,0 +1,153 @@ + +
+ +
+
+ +
+ Material Tailwind is an open-source crafted in Tailwind CSS. Get + Material Tailwind and take advantage of its free components and + features that will help you set up your web project quickly. +
+
+
+ + +
+ +
+ + +
+
+ + + \ No newline at end of file diff --git a/apps/site/public/accordion/accordion-demo.tsx b/apps/site/public/accordion/accordion-demo.tsx new file mode 100644 index 000000000..0a06dd708 --- /dev/null +++ b/apps/site/public/accordion/accordion-demo.tsx @@ -0,0 +1,166 @@ +// components/AccordionDemo.tsx +const AccordionDemo = () => { + return ( +
+ +
+
+ +
+ Material Tailwind is an open-source crafted in Tailwind CSS. Get + Material Tailwind and take advantage of its free components and + features that will help you set up your web project quickly. +
+
+
+ + +
+ +
+ + +
+
+ + + + +`, + }} + /> + ); +}; + +export default AccordionDemo; \ No newline at end of file diff --git a/apps/site/public/accordion/accordion-disabled.tsx b/apps/site/public/accordion/accordion-disabled.tsx new file mode 100644 index 000000000..c212cc1f5 --- /dev/null +++ b/apps/site/public/accordion/accordion-disabled.tsx @@ -0,0 +1,16 @@ +export function AccordionDisabled() { + return ( + <> +
+
+
+ + + ) +} \ No newline at end of file diff --git a/apps/site/public/accordion/controlled-accordion.tsx b/apps/site/public/accordion/controlled-accordion.tsx new file mode 100644 index 000000000..3dc6935c5 --- /dev/null +++ b/apps/site/public/accordion/controlled-accordion.tsx @@ -0,0 +1,21 @@ +export function ControlledAccordion() { + return ( + <> +
+
+
+
+
Material Tailwind is an open-source crafted in Tailwind CSS. Get Material Tailwind and take advantage of its free components and features that will help you set up your web project quickly.
+
+
+
+ + + ) +} \ No newline at end of file diff --git a/apps/site/public/accordion/index.ts b/apps/site/public/accordion/index.ts new file mode 100644 index 000000000..6c4f647fc --- /dev/null +++ b/apps/site/public/accordion/index.ts @@ -0,0 +1,7 @@ +"use client"; +export * from "./accordion-all-open"; +export * from "./accordion-custom-icon"; +export * from "./accordion-custom-styles"; +export * from "./accordion-demo"; +export * from "./accordion-disabled"; +export * from "./controlled-accordion"; diff --git a/apps/site/src/app/api/code/route.ts b/apps/site/src/app/api/code/route.ts new file mode 100644 index 000000000..0fc60af37 --- /dev/null +++ b/apps/site/src/app/api/code/route.ts @@ -0,0 +1,24 @@ +import { NextRequest, NextResponse } from 'next/server'; +import { promises as fs } from 'fs'; +import path from 'path'; + +export async function GET(req: NextRequest) { + console.log('GET /api/code'); + + const { searchParams } = new URL(req.url); + const filePath = searchParams.get('filePath'); + + if (!filePath) { + return NextResponse.json({ error: 'File path is required' }, { status: 400 }); + } + + try { + const absolutePath = path.join(process.cwd(), filePath); + const content = await fs.readFile(absolutePath, 'utf8'); + console.log(absolutePath); + return new NextResponse(content, { status: 200 }); + } catch (error) { + console.error('Error reading file:', error); + return NextResponse.json({ error: 'File not found' }, { status: 500 }); + } +} diff --git a/apps/site/src/app/docs/[...slug]/page.tsx b/apps/site/src/app/docs/[...slug]/page.tsx index 7b701f797..0bcc85e45 100644 --- a/apps/site/src/app/docs/[...slug]/page.tsx +++ b/apps/site/src/app/docs/[...slug]/page.tsx @@ -3,7 +3,7 @@ import { CodePreview, ColorPalette, FrameworkCard, - ComponentPreview, + // ComponentPreview, } from "@components"; import Link from "next/link"; import { Code } from "bright"; @@ -106,6 +106,10 @@ import * as HTMLSwitch from "@components/docs-html/switch"; import * as HTMLBadge from "@components/docs-html/badge"; import * as HTMLAccordion from "@components/docs-html/accordion"; + +import CodeSnippet from '@components/CodeSnippet'; +import ComponentPreview from '@components/ComponentPreview'; + async function readDocsContentFn(pathUrl: string) { const fullPath = `${path.join( process.cwd(), @@ -363,6 +367,7 @@ export default async function Docs({ params: { slug } }) { HTMLSwitch, HTMLBadge, HTMLAccordion, + CodeSnippet, }} /> diff --git a/apps/site/src/app/docs/content/html/test.mdx b/apps/site/src/app/docs/content/html/test.mdx new file mode 100644 index 000000000..a76313a75 --- /dev/null +++ b/apps/site/src/app/docs/content/html/test.mdx @@ -0,0 +1,22 @@ +--- +title: Tailwind CSS Accordion - Material Tailwind v3 +description: Implement expandable accordions with React and Tailwind CSS using Material Tailwind v3. Organize content effectively with customizable accordion components. +github: accordion +prev: docs/react/text-area +next: docs/react/avatar +--- + + +import ComponentPreview from '@components/ComponentPreview'; +import CodeSnippet from '@components/CodeSnippet'; + +# Tailwind CSS Accordion + +
+

Test

+

Test page

+ + +

HTML

+ +
\ No newline at end of file diff --git a/apps/site/src/components/CodeSnippet.tsx b/apps/site/src/components/CodeSnippet.tsx new file mode 100644 index 000000000..0eaddb397 --- /dev/null +++ b/apps/site/src/components/CodeSnippet.tsx @@ -0,0 +1,28 @@ +"use client"; + +import React, { useState, useEffect } from 'react'; + +interface CodeSnippetProps { + codePath: string; + language: string; +} + +const CodeSnippet: React.FC = ({ codePath, language }) => { + const [code, setCode] = useState(''); + + console.log('codePath', codePath); + + useEffect(() => { + fetch(`/api/code?filePath=${codePath}`) + .then((res) => res.text()) + .then((data) => setCode(data)); + }); + + return ( + 
+      {code}
+
+ ); +}; + +export default CodeSnippet; diff --git a/apps/site/src/components/ComponentPreview.tsx b/apps/site/src/components/ComponentPreview.tsx new file mode 100644 index 000000000..618f981d5 --- /dev/null +++ b/apps/site/src/components/ComponentPreview.tsx @@ -0,0 +1,21 @@ +'use client'; + +import React from 'react'; + +interface ComponentPreviewProps { + componentPath: string; +} + +const ComponentPreview: React.FC = ({ componentPath }) => { + // const Component = React.lazy(() => import(componentPath)); + const Component = React.lazy(() => import(`${componentPath}`)); + + console.log('componentPath', componentPath); + return ( + Loading...
}> + + + ); +}; + +export default ComponentPreview; diff --git a/apps/site/src/components/docs-html/accordion/accordion-all-open.tsx b/apps/site/src/components/docs-html/accordion/accordion-all-open.tsx index 57312929b..5251bbb3d 100644 --- a/apps/site/src/components/docs-html/accordion/accordion-all-open.tsx +++ b/apps/site/src/components/docs-html/accordion/accordion-all-open.tsx @@ -1,167 +1,16 @@ -"use client"; - -import { useEffect } from "react"; - export function AccordionAllOpen() { - useEffect(() => { - const accordionIds = ["accordion1", "accordion2", "accordion3"]; - - accordionIds.forEach((id) => { - const accordion = document.getElementById(id); - if (!accordion) return; - - const button = accordion.querySelector("button"); - const content = accordion.querySelector("div[data-content]"); - - // open accordions by default - accordion.setAttribute("data-open", "true"); - button?.setAttribute("data-open", "true"); - content?.setAttribute("data-open", "true"); - - if (content) { - content.classList.remove("hidden", "h-0"); - content.classList.add("block", "h-auto"); - } - - // Click listener to toggle accordion state - accordion.addEventListener("click", function () { - const isOpen = this.getAttribute("data-open") === "true"; - const newOpenState = !isOpen; - - this.setAttribute("data-open", newOpenState ? "true" : "false"); - button?.setAttribute("data-open", newOpenState ? "true" : "false"); - content?.setAttribute("data-open", newOpenState ? "true" : "false"); - - if (content) { - if (newOpenState) { - content.classList.remove("hidden", "h-0"); - content.classList.add("block", "h-auto"); - } else { - content.classList.remove("block", "h-auto"); - content.classList.add("hidden", "h-0"); - } - } - }); - }); - }, []); return ( -
-
- -
- Material Tailwind is an open-source crafted in Tailwind CSS. Get - Material Tailwind and take advantage of its free components and - features that will help you set up your web project quickly. -
-
- -
- -
- Material Tailwind is an open-source crafted in Tailwind CSS. Get - Material Tailwind and take advantage of its free components and - features that will help you set up your web project quickly. -
-
- -
- -
- Material Tailwind is an open-source crafted in Tailwind CSS. Get - Material Tailwind and take advantage of its free components and - features that will help you set up your web project quickly. -
-
-
- ); -} + <> +
+
+
+ + + ) +} \ No newline at end of file diff --git a/apps/site/src/components/docs-html/accordion/accordion-custom-icon.tsx b/apps/site/src/components/docs-html/accordion/accordion-custom-icon.tsx new file mode 100644 index 000000000..32e8c9d07 --- /dev/null +++ b/apps/site/src/components/docs-html/accordion/accordion-custom-icon.tsx @@ -0,0 +1,22 @@ +export function AccordionCustomIcon() { + return ( + <> +
+
+
+ + + ) +} \ No newline at end of file diff --git a/apps/site/src/components/docs-html/accordion/accordion-custom-styles.tsx b/apps/site/src/components/docs-html/accordion/accordion-custom-styles.tsx new file mode 100644 index 000000000..584065b44 --- /dev/null +++ b/apps/site/src/components/docs-html/accordion/accordion-custom-styles.tsx @@ -0,0 +1,16 @@ +export function AccordionCustomStyles() { + return ( + <> +
+
+
+ + + ) +} \ No newline at end of file diff --git a/apps/site/src/components/docs-html/accordion/accordion-demo.tsx b/apps/site/src/components/docs-html/accordion/accordion-demo.tsx index f7b4c64df..0a06dd708 100644 --- a/apps/site/src/components/docs-html/accordion/accordion-demo.tsx +++ b/apps/site/src/components/docs-html/accordion/accordion-demo.tsx @@ -1,171 +1,166 @@ -"use client"; - -import { useEffect } from "react"; - -export function AccordionDemo() { - useEffect(() => { - const accordionItems = document.querySelectorAll("[data-open]"); +// components/AccordionDemo.tsx +const AccordionDemo = () => { + return ( +
- const setAccordionState = (item, isOpen) => { - const content = item.querySelector("div[data-content]"); - const button = item.querySelector("button"); +
+
+ +
+ Material Tailwind is an open-source crafted in Tailwind CSS. Get + Material Tailwind and take advantage of its free components and + features that will help you set up your web project quickly. +
+
+
+ + +
- item.setAttribute("data-open", isOpen ? "true" : "false"); - content?.setAttribute("data-open", isOpen ? "true" : "false"); - button?.setAttribute("data-open", isOpen ? "true" : "false"); +
+ + +
+
- if (content) { - content.classList.toggle("hidden", !isOpen); - content.classList.toggle("h-0", !isOpen); - content.classList.toggle("block", isOpen); - content.classList.toggle("h-auto", isOpen); - } - }; + + -
- -
- Material Tailwind is an open-source crafted in Tailwind CSS. Get - Material Tailwind and take advantage of its free components and - features that will help you set up your web project quickly. -
-
-
+`, + }} + /> ); -} +}; + +export default AccordionDemo; \ No newline at end of file diff --git a/apps/site/src/components/docs-html/accordion/accordion-disabled.tsx b/apps/site/src/components/docs-html/accordion/accordion-disabled.tsx new file mode 100644 index 000000000..c212cc1f5 --- /dev/null +++ b/apps/site/src/components/docs-html/accordion/accordion-disabled.tsx @@ -0,0 +1,16 @@ +export function AccordionDisabled() { + return ( + <> +
+
+
+ + + ) +} \ No newline at end of file diff --git a/apps/site/src/components/docs-html/accordion/controlled-accordion.tsx b/apps/site/src/components/docs-html/accordion/controlled-accordion.tsx new file mode 100644 index 000000000..3dc6935c5 --- /dev/null +++ b/apps/site/src/components/docs-html/accordion/controlled-accordion.tsx @@ -0,0 +1,21 @@ +export function ControlledAccordion() { + return ( + <> +
+
+
+
+
Material Tailwind is an open-source crafted in Tailwind CSS. Get Material Tailwind and take advantage of its free components and features that will help you set up your web project quickly.
+
+
+
+ + + ) +} \ No newline at end of file diff --git a/apps/site/src/components/docs-html/accordion/index.ts b/apps/site/src/components/docs-html/accordion/index.ts index ce88f9a45..6c4f647fc 100644 --- a/apps/site/src/components/docs-html/accordion/index.ts +++ b/apps/site/src/components/docs-html/accordion/index.ts @@ -1,4 +1,7 @@ "use client"; - +export * from "./accordion-all-open"; +export * from "./accordion-custom-icon"; +export * from "./accordion-custom-styles"; export * from "./accordion-demo"; -export * from "./accordion-all-open"; \ No newline at end of file +export * from "./accordion-disabled"; +export * from "./controlled-accordion"; diff --git a/apps/site/src/components/docs/accordion/accordion-all-open.tsx b/apps/site/src/components/docs/accordion/accordion-all-open.tsx index 0468a8f26..12b195f0e 100644 --- a/apps/site/src/components/docs/accordion/accordion-all-open.tsx +++ b/apps/site/src/components/docs/accordion/accordion-all-open.tsx @@ -1,7 +1,7 @@ import { Accordion } from "@material-tailwind/react"; import { NavArrowDown } from "iconoir-react"; -export function AccordionAllOpen() { +export default function AccordionAllOpen() { return ( diff --git a/apps/site/src/components/docs/accordion/accordion-demo.tsx b/apps/site/src/components/docs/accordion/accordion-demo.tsx index 2bed326dd..15dd669a6 100644 --- a/apps/site/src/components/docs/accordion/accordion-demo.tsx +++ b/apps/site/src/components/docs/accordion/accordion-demo.tsx @@ -1,7 +1,7 @@ import { Accordion } from "@material-tailwind/react"; import { NavArrowDown } from "iconoir-react"; -export function AccordionDemo() { +export default function AccordionDemo() { return ( diff --git a/apps/site/src/components/index.ts b/apps/site/src/components/index.ts index a441ec453..65b7018e2 100644 --- a/apps/site/src/components/index.ts +++ b/apps/site/src/components/index.ts @@ -15,4 +15,4 @@ export * from "./code-preview"; export * from "./theme-toggle"; export * from "./color-palette"; export * from "./framework-card"; -export * from "./component-preview"; +export * from "./ComponentPreview"; diff --git a/apps/site/tsconfig.json b/apps/site/tsconfig.json index dac44af7f..6eb2e60a3 100644 --- a/apps/site/tsconfig.json +++ b/apps/site/tsconfig.json @@ -1,6 +1,6 @@ { "extends": "tsconfig/nextjs.json", - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/app/docs/content/html/test.mdx"], "compilerOptions": { "baseUrl": ".", "paths": { From 6674897d757d3bcd9f03ec34ddb462f30304bfb6 Mon Sep 17 00:00:00 2001 From: Beniamin Marcu Date: Tue, 19 Nov 2024 12:45:00 +0200 Subject: [PATCH 02/29] Update test.mdx --- apps/site/src/app/docs/content/html/test.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/app/docs/content/html/test.mdx b/apps/site/src/app/docs/content/html/test.mdx index a76313a75..3827daf07 100644 --- a/apps/site/src/app/docs/content/html/test.mdx +++ b/apps/site/src/app/docs/content/html/test.mdx @@ -18,5 +18,5 @@ import CodeSnippet from '@components/CodeSnippet';

HTML

- +
\ No newline at end of file From 727e8e06e4c147be9627f312dff42353e45fb142 Mon Sep 17 00:00:00 2001 From: Beniamin Marcu Date: Tue, 19 Nov 2024 12:51:04 +0200 Subject: [PATCH 03/29] Update CodeSnippet.tsx --- apps/site/src/components/CodeSnippet.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/apps/site/src/components/CodeSnippet.tsx b/apps/site/src/components/CodeSnippet.tsx index 0eaddb397..a9344fa50 100644 --- a/apps/site/src/components/CodeSnippet.tsx +++ b/apps/site/src/components/CodeSnippet.tsx @@ -16,7 +16,10 @@ const CodeSnippet: React.FC = ({ codePath, language }) => { fetch(`/api/code?filePath=${codePath}`) .then((res) => res.text()) .then((data) => setCode(data)); - }); + + console.log('useeffect'); + return; + }, [codePath]); return ( 

From d3401e9ad1f682d1fa4915cb571dfa42ee87c3a3 Mon Sep 17 00:00:00 2001
From: Beniamin Marcu 
Date: Tue, 19 Nov 2024 12:51:06 +0200
Subject: [PATCH 04/29] Update ComponentPreview.tsx

---
 apps/site/src/components/ComponentPreview.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/site/src/components/ComponentPreview.tsx b/apps/site/src/components/ComponentPreview.tsx
index 618f981d5..40d6b4fa6 100644
--- a/apps/site/src/components/ComponentPreview.tsx
+++ b/apps/site/src/components/ComponentPreview.tsx
@@ -11,6 +11,7 @@ const ComponentPreview: React.FC = ({ componentPath }) =>
   const Component = React.lazy(() => import(`${componentPath}`));
 
   console.log('componentPath', componentPath);
+  console.log('Component', Component);
   return (
     Loading...}>
       

From 953926685c2f19cd2a8ef4caddb70d6cf925e02f Mon Sep 17 00:00:00 2001
From: Beniamin Marcu 
Date: Tue, 19 Nov 2024 13:03:34 +0200
Subject: [PATCH 05/29] Update route.ts

---
 apps/site/src/app/api/code/route.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/site/src/app/api/code/route.ts b/apps/site/src/app/api/code/route.ts
index 0fc60af37..19007437b 100644
--- a/apps/site/src/app/api/code/route.ts
+++ b/apps/site/src/app/api/code/route.ts
@@ -14,8 +14,10 @@ export async function GET(req: NextRequest) {
 
   try {
     const absolutePath = path.join(process.cwd(), filePath);
+    
+    console.log('absolutePath', absolutePath);
+
     const content = await fs.readFile(absolutePath, 'utf8');
-    console.log(absolutePath);
     return new NextResponse(content, { status: 200 });
   } catch (error) {
     console.error('Error reading file:', error);

From 1f99298a551b52227e209f52a300b8857b073d3b Mon Sep 17 00:00:00 2001
From: Beniamin Marcu 
Date: Tue, 19 Nov 2024 13:12:03 +0200
Subject: [PATCH 06/29] Update CodeSnippet.tsx

---
 apps/site/src/components/CodeSnippet.tsx | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/apps/site/src/components/CodeSnippet.tsx b/apps/site/src/components/CodeSnippet.tsx
index a9344fa50..b45651bec 100644
--- a/apps/site/src/components/CodeSnippet.tsx
+++ b/apps/site/src/components/CodeSnippet.tsx
@@ -13,12 +13,24 @@ const CodeSnippet: React.FC = ({ codePath, language }) => {
   console.log('codePath', codePath);
 
   useEffect(() => {
-    fetch(`/api/code?filePath=${codePath}`)
-      .then((res) => res.text())
-      .then((data) => setCode(data));
-
-      console.log('useeffect');
-      return;
+    const fetchCode = async () => {
+      try {
+        const res = await fetch(`/api/code?filePath=${codePath}`);
+        if (!res.ok) {
+          throw new Error('Failed to fetch code');
+        }
+        const data = await res.text();
+        setCode(data);
+      } catch (error) {
+        console.error('Error fetching code:', error);
+        setCode('Error loading code');
+      }
+    };
+
+    fetchCode();
+
+    console.log('useEffect triggered');
+    return;
   }, [codePath]);
 
   return (

From b3ad34d539646e73ef1220cf4e3f62424ed1ec56 Mon Sep 17 00:00:00 2001
From: Beniamin Marcu 
Date: Tue, 19 Nov 2024 13:16:52 +0200
Subject: [PATCH 07/29] Update next.config.js

---
 apps/site/next.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/site/next.config.js b/apps/site/next.config.js
index 934fe16f3..7dc9c8312 100644
--- a/apps/site/next.config.js
+++ b/apps/site/next.config.js
@@ -16,7 +16,7 @@ const nextConfig = {
     ignoreBuildErrors: true,
   },
   transpilePackages: ["next-mdx-remote"],
-  assetPrefix: process.env.NEXT_PUBLIC_SITE_URL,
+  assetPrefix: "https://material-tailwind-git-feat-html-components-ct-tailwind-team.vercel.app" || process.env.NEXT_PUBLIC_SITE_URL,
   async redirects() {
     return [
       {

From 6258771305014df0d796c3308aaeffdbe913cec8 Mon Sep 17 00:00:00 2001
From: Beniamin Marcu 
Date: Tue, 19 Nov 2024 13:22:02 +0200
Subject: [PATCH 08/29] Update test.mdx

---
 apps/site/src/app/docs/content/html/test.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/site/src/app/docs/content/html/test.mdx b/apps/site/src/app/docs/content/html/test.mdx
index 3827daf07..a76313a75 100644
--- a/apps/site/src/app/docs/content/html/test.mdx
+++ b/apps/site/src/app/docs/content/html/test.mdx
@@ -18,5 +18,5 @@ import CodeSnippet from '@components/CodeSnippet';
   
   
   
HTML

-  
+  
 
\ No newline at end of file

From 83b5fa78b6c935ca463d4f3e061e9dce382029b5 Mon Sep 17 00:00:00 2001
From: Beniamin Marcu 
Date: Tue, 19 Nov 2024 13:36:51 +0200
Subject: [PATCH 09/29] wip: change paths

---
 apps/site/next.config.js                          | 15 ++++++---------
 apps/site/src/app/docs/content/html/test.mdx      |  2 +-
 .../data}/accordion/accordion-all-open.tsx        |  0
 .../data}/accordion/accordion-custom-icon.tsx     |  0
 .../data}/accordion/accordion-custom-styles.tsx   |  0
 .../data}/accordion/accordion-demo.html           |  0
 .../data}/accordion/accordion-demo.tsx            |  0
 .../data}/accordion/accordion-disabled.tsx        |  0
 .../data}/accordion/controlled-accordion.tsx      |  0
 apps/site/{public => src/data}/accordion/index.ts |  0
 10 files changed, 7 insertions(+), 10 deletions(-)
 rename apps/site/{public => src/data}/accordion/accordion-all-open.tsx (100%)
 rename apps/site/{public => src/data}/accordion/accordion-custom-icon.tsx (100%)
 rename apps/site/{public => src/data}/accordion/accordion-custom-styles.tsx (100%)
 rename apps/site/{public => src/data}/accordion/accordion-demo.html (100%)
 rename apps/site/{public => src/data}/accordion/accordion-demo.tsx (100%)
 rename apps/site/{public => src/data}/accordion/accordion-disabled.tsx (100%)
 rename apps/site/{public => src/data}/accordion/controlled-accordion.tsx (100%)
 rename apps/site/{public => src/data}/accordion/index.ts (100%)

diff --git a/apps/site/next.config.js b/apps/site/next.config.js
index 7dc9c8312..fde6c33f9 100644
--- a/apps/site/next.config.js
+++ b/apps/site/next.config.js
@@ -86,15 +86,12 @@ const nextConfig = {
       },
     ];
   },
-  webpack: {
-    configure: (webpackConfig) => {
-      webpackConfig.module.rules.push({
-        test: /\.(ts|tsx)$/,
-        loader: 'ts-loader',
-        options: { transpileOnly: true },
-      });
-      return webpackConfig;
-    },
+  webpack: (config) => {
+    config.module.rules.push({
+      test: /\.(js|jsx|ts|tsx|html)$/,
+      use: 'raw-loader',
+    });
+    return config;
   },
 };
 
diff --git a/apps/site/src/app/docs/content/html/test.mdx b/apps/site/src/app/docs/content/html/test.mdx
index a76313a75..f6f5231c9 100644
--- a/apps/site/src/app/docs/content/html/test.mdx
+++ b/apps/site/src/app/docs/content/html/test.mdx
@@ -18,5 +18,5 @@ import CodeSnippet from '@components/CodeSnippet';
   
   
   
HTML

-  
+  
 
\ No newline at end of file
diff --git a/apps/site/public/accordion/accordion-all-open.tsx b/apps/site/src/data/accordion/accordion-all-open.tsx
similarity index 100%
rename from apps/site/public/accordion/accordion-all-open.tsx
rename to apps/site/src/data/accordion/accordion-all-open.tsx
diff --git a/apps/site/public/accordion/accordion-custom-icon.tsx b/apps/site/src/data/accordion/accordion-custom-icon.tsx
similarity index 100%
rename from apps/site/public/accordion/accordion-custom-icon.tsx
rename to apps/site/src/data/accordion/accordion-custom-icon.tsx
diff --git a/apps/site/public/accordion/accordion-custom-styles.tsx b/apps/site/src/data/accordion/accordion-custom-styles.tsx
similarity index 100%
rename from apps/site/public/accordion/accordion-custom-styles.tsx
rename to apps/site/src/data/accordion/accordion-custom-styles.tsx
diff --git a/apps/site/public/accordion/accordion-demo.html b/apps/site/src/data/accordion/accordion-demo.html
similarity index 100%
rename from apps/site/public/accordion/accordion-demo.html
rename to apps/site/src/data/accordion/accordion-demo.html
diff --git a/apps/site/public/accordion/accordion-demo.tsx b/apps/site/src/data/accordion/accordion-demo.tsx
similarity index 100%
rename from apps/site/public/accordion/accordion-demo.tsx
rename to apps/site/src/data/accordion/accordion-demo.tsx
diff --git a/apps/site/public/accordion/accordion-disabled.tsx b/apps/site/src/data/accordion/accordion-disabled.tsx
similarity index 100%
rename from apps/site/public/accordion/accordion-disabled.tsx
rename to apps/site/src/data/accordion/accordion-disabled.tsx
diff --git a/apps/site/public/accordion/controlled-accordion.tsx b/apps/site/src/data/accordion/controlled-accordion.tsx
similarity index 100%
rename from apps/site/public/accordion/controlled-accordion.tsx
rename to apps/site/src/data/accordion/controlled-accordion.tsx
diff --git a/apps/site/public/accordion/index.ts b/apps/site/src/data/accordion/index.ts
similarity index 100%
rename from apps/site/public/accordion/index.ts
rename to apps/site/src/data/accordion/index.ts

From 4542e4a969524c2fbe54f09006182d9a4dc4199b Mon Sep 17 00:00:00 2001
From: Beniamin Marcu 
Date: Tue, 19 Nov 2024 13:44:28 +0200
Subject: [PATCH 10/29] Update next.config.js

---
 apps/site/next.config.js | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/apps/site/next.config.js b/apps/site/next.config.js
index fde6c33f9..358976889 100644
--- a/apps/site/next.config.js
+++ b/apps/site/next.config.js
@@ -86,12 +86,15 @@ const nextConfig = {
       },
     ];
   },
-  webpack: (config) => {
-    config.module.rules.push({
-      test: /\.(js|jsx|ts|tsx|html)$/,
-      use: 'raw-loader',
-    });
-    return config;
+  webpack: {
+    configure: (webpackConfig) => {
+      webpackConfig.module.rules.push({
+        test: /\.(ts|tsx|html|mdx|md|js|jsx)$/,
+        loader: 'raw-loader',
+        options: { transpileOnly: true },
+      });
+      return webpackConfig;
+    },
   },
 };
 

From a85377854c0465ed294175ab82e47f71cd23d724 Mon Sep 17 00:00:00 2001
From: Beniamin Marcu 
Date: Tue, 19 Nov 2024 15:42:08 +0200
Subject: [PATCH 11/29] wip: code preview

---
 apps/site/next.config.js                      |  21 ++-
 apps/site/src/app/docs/[...slug]/page.tsx     |   2 +
 apps/site/src/app/docs/content/html/test.mdx  |   6 +-
 apps/site/src/components/CodeSection.tsx      |  26 +++
 apps/site/src/components/CodeSnippet.tsx      |  46 +++--
 apps/site/src/components/ComponentPreview.tsx |   4 +-
 .../docs-html/accordion/accordion-demo.tsx    |   2 +-
 .../src/data/accordion/accordion-all-open.tsx |  16 --
 .../data/accordion/accordion-custom-icon.tsx  |  22 ---
 .../accordion/accordion-custom-styles.tsx     |  16 --
 .../src/data/accordion/accordion-demo.html    | 153 ----------------
 .../src/data/accordion/accordion-demo.tsx     | 166 ------------------
 .../src/data/accordion/accordion-disabled.tsx |  16 --
 .../data/accordion/controlled-accordion.tsx   |  21 ---
 apps/site/src/data/accordion/index.ts         |   7 -
 apps/site/src/types/declarations.d.ts         |  11 ++
 16 files changed, 81 insertions(+), 454 deletions(-)
 create mode 100644 apps/site/src/components/CodeSection.tsx
 delete mode 100644 apps/site/src/data/accordion/accordion-all-open.tsx
 delete mode 100644 apps/site/src/data/accordion/accordion-custom-icon.tsx
 delete mode 100644 apps/site/src/data/accordion/accordion-custom-styles.tsx
 delete mode 100644 apps/site/src/data/accordion/accordion-demo.html
 delete mode 100644 apps/site/src/data/accordion/accordion-demo.tsx
 delete mode 100644 apps/site/src/data/accordion/accordion-disabled.tsx
 delete mode 100644 apps/site/src/data/accordion/controlled-accordion.tsx
 delete mode 100644 apps/site/src/data/accordion/index.ts
 create mode 100644 apps/site/src/types/declarations.d.ts

diff --git a/apps/site/next.config.js b/apps/site/next.config.js
index 358976889..f111b19cd 100644
--- a/apps/site/next.config.js
+++ b/apps/site/next.config.js
@@ -16,7 +16,7 @@ const nextConfig = {
     ignoreBuildErrors: true,
   },
   transpilePackages: ["next-mdx-remote"],
-  assetPrefix: "https://material-tailwind-git-feat-html-components-ct-tailwind-team.vercel.app" || process.env.NEXT_PUBLIC_SITE_URL,
+  assetPrefix:  process.env.NEXT_PUBLIC_SITE_URL,
   async redirects() {
     return [
       {
@@ -88,11 +88,24 @@ const nextConfig = {
   },
   webpack: {
     configure: (webpackConfig) => {
+      // webpackConfig.module.rules.push({
+      //   test: /\.(ts|tsx|html|mdx|md|js|jsx)$/,
+      //   loader: 'raw-loader',
+      //   options: { transpileOnly: true },
+      // });
+
+      webpackConfig.module.rules.push({
+        test: /\.html$/,
+        use: 'raw-loader',
+      });
+  
+      // For .tsx files imported with ?raw
       webpackConfig.module.rules.push({
-        test: /\.(ts|tsx|html|mdx|md|js|jsx)$/,
-        loader: 'raw-loader',
-        options: { transpileOnly: true },
+        test: /\.tsx$/,
+        resourceQuery: /raw/, // applies only when '?raw' is present
+        use: 'raw-loader',
       });
+  
       return webpackConfig;
     },
   },
diff --git a/apps/site/src/app/docs/[...slug]/page.tsx b/apps/site/src/app/docs/[...slug]/page.tsx
index 0bcc85e45..e5380f202 100644
--- a/apps/site/src/app/docs/[...slug]/page.tsx
+++ b/apps/site/src/app/docs/[...slug]/page.tsx
@@ -109,6 +109,7 @@ import * as HTMLAccordion from "@components/docs-html/accordion";
 
 import CodeSnippet from '@components/CodeSnippet';
 import ComponentPreview from '@components/ComponentPreview';
+import CodeSection from '@components/CodeSection';
 
 async function readDocsContentFn(pathUrl: string) {
   const fullPath = `${path.join(
@@ -368,6 +369,7 @@ export default async function Docs({ params: { slug } }) {
           HTMLBadge,
           HTMLAccordion,
           CodeSnippet,
+          CodeSection
         }}
       />
     
diff --git a/apps/site/src/app/docs/content/html/test.mdx b/apps/site/src/app/docs/content/html/test.mdx
index f6f5231c9..afb7135e9 100644
--- a/apps/site/src/app/docs/content/html/test.mdx
+++ b/apps/site/src/app/docs/content/html/test.mdx
@@ -15,8 +15,6 @@ import CodeSnippet from '@components/CodeSnippet';
 

   
Test

   
Test page

-  
-  
-  
HTML

-  
+  
+
 

\ No newline at end of file
diff --git a/apps/site/src/components/CodeSection.tsx b/apps/site/src/components/CodeSection.tsx
new file mode 100644
index 000000000..7fad90909
--- /dev/null
+++ b/apps/site/src/components/CodeSection.tsx
@@ -0,0 +1,26 @@
+"use client";
+// pages/your-page.tsx or wherever your component is
+
+// import tsxCodeContent from '../components/docs/accordion/accordion-demo.tsx?raw';
+import tsxCodeContent from '!!raw-loader!../components/docs/accordion/accordion-demo.tsx';
+
+// import htmlCodeContent from '../components/docs-html/accordion/accordion-demo.tsx?raw';
+import htmlCodeContent from '!!raw-loader!../components/docs-html/accordion/accordion-demo.tsx';
+
+import ComponentPreview from '../components/ComponentPreview';
+
+import CodeSnippet from '../components/CodeSnippet';
+
+function CodeSection() {
+  return (
+    

+      
+      
React Component:

+      
+      
HTML:

+      
+    

+  );
+};
+
+export default CodeSection;
diff --git a/apps/site/src/components/CodeSnippet.tsx b/apps/site/src/components/CodeSnippet.tsx
index b45651bec..fc57af9c1 100644
--- a/apps/site/src/components/CodeSnippet.tsx
+++ b/apps/site/src/components/CodeSnippet.tsx
@@ -3,39 +3,35 @@
 import React, { useState, useEffect } from 'react';
 
 interface CodeSnippetProps {
-  codePath: string;
+  codeContent: string;
   language: string;
 }
 
-const CodeSnippet: React.FC = ({ codePath, language }) => {
-  const [code, setCode] = useState('');
-
-  console.log('codePath', codePath);
-
-  useEffect(() => {
-    const fetchCode = async () => {
-      try {
-        const res = await fetch(`/api/code?filePath=${codePath}`);
-        if (!res.ok) {
-          throw new Error('Failed to fetch code');
-        }
-        const data = await res.text();
-        setCode(data);
-      } catch (error) {
-        console.error('Error fetching code:', error);
-        setCode('Error loading code');
-      }
-    };
 
-    fetchCode();
+function getHtmlCodeContent(codeContent: string) {
+  const regex = /__html:\s*`([\s\S]*?)`/;
+  const match = codeContent.match(regex);
+
+  if (match && match[1]) {
+    const htmlContent = match[1];
+    return htmlContent;
+  } else {
+    console.log('No HTML content found');
+    return '';
+  }
+}
 
-    console.log('useEffect triggered');
-    return;
-  }, [codePath]);
+function CodeSnippet({ codeContent, language }: CodeSnippetProps) {
 
   return (
     
-      {code}
+      {
+        language === 'html' ? (
+          {getHtmlCodeContent(codeContent)} 
+        ) : (
+          {codeContent}
+        )
+      }
     

   );
 };
diff --git a/apps/site/src/components/ComponentPreview.tsx b/apps/site/src/components/ComponentPreview.tsx
index 40d6b4fa6..e6d2eed01 100644
--- a/apps/site/src/components/ComponentPreview.tsx
+++ b/apps/site/src/components/ComponentPreview.tsx
@@ -6,12 +6,10 @@ interface ComponentPreviewProps {
   componentPath: string;
 }
 
-const ComponentPreview: React.FC = ({ componentPath }) => {
+function ComponentPreview({ componentPath }: ComponentPreviewProps) {
   // const Component = React.lazy(() => import(componentPath));
   const Component = React.lazy(() => import(`${componentPath}`));
 
-  console.log('componentPath', componentPath);
-  console.log('Component', Component);
   return (
     Loading...}>
       
diff --git a/apps/site/src/components/docs-html/accordion/accordion-demo.tsx b/apps/site/src/components/docs-html/accordion/accordion-demo.tsx
index 0a06dd708..403370de5 100644
--- a/apps/site/src/components/docs-html/accordion/accordion-demo.tsx
+++ b/apps/site/src/components/docs-html/accordion/accordion-demo.tsx
@@ -1,5 +1,5 @@
 // components/AccordionDemo.tsx
-const AccordionDemo = () => {
+function AccordionDemo () {
   return (
     

-      

-

-

-
-    
-  )
-}
\ No newline at end of file
diff --git a/apps/site/src/data/accordion/accordion-custom-icon.tsx b/apps/site/src/data/accordion/accordion-custom-icon.tsx
deleted file mode 100644
index 32e8c9d07..000000000
--- a/apps/site/src/data/accordion/accordion-custom-icon.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-export function AccordionCustomIcon() {
-  return (
-    <>
-      

-

-

-
-    
-  )
-}
\ No newline at end of file
diff --git a/apps/site/src/data/accordion/accordion-custom-styles.tsx b/apps/site/src/data/accordion/accordion-custom-styles.tsx
deleted file mode 100644
index 584065b44..000000000
--- a/apps/site/src/data/accordion/accordion-custom-styles.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-export function AccordionCustomStyles() {
-  return (
-    <>
-      

-

-

-
-    
-  )
-}
\ No newline at end of file
diff --git a/apps/site/src/data/accordion/accordion-demo.html b/apps/site/src/data/accordion/accordion-demo.html
deleted file mode 100644
index 452593603..000000000
--- a/apps/site/src/data/accordion/accordion-demo.html
+++ /dev/null
@@ -1,153 +0,0 @@
-
-        

-
-

-  

-    
-    

-      Material Tailwind is an open-source crafted in Tailwind CSS. Get
-      Material Tailwind and take advantage of its free components and
-      features that will help you set up your web project quickly.
-    

-  

-  

-    
-    
-  

-
-  

-    
-    
-  

-

-
-
-
\ No newline at end of file
diff --git a/apps/site/src/data/accordion/accordion-demo.tsx b/apps/site/src/data/accordion/accordion-demo.tsx
deleted file mode 100644
index 0a06dd708..000000000
--- a/apps/site/src/data/accordion/accordion-demo.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-// components/AccordionDemo.tsx
-const AccordionDemo = () => {
-  return (
-    

-
-

-  

-    
-    

-      Material Tailwind is an open-source crafted in Tailwind CSS. Get
-      Material Tailwind and take advantage of its free components and
-      features that will help you set up your web project quickly.
-    

-  

-  

-    
-    
-  

-
-  

-    
-    
-  

-

-
-
-
-
-`,
-      }}
-    />
-  );
-};
-
-export default AccordionDemo;
\ No newline at end of file
diff --git a/apps/site/src/data/accordion/accordion-disabled.tsx b/apps/site/src/data/accordion/accordion-disabled.tsx
deleted file mode 100644
index c212cc1f5..000000000
--- a/apps/site/src/data/accordion/accordion-disabled.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-export function AccordionDisabled() {
-  return (
-    <>
-      

-

-

-
-    
-  )
-}
\ No newline at end of file
diff --git a/apps/site/src/data/accordion/controlled-accordion.tsx b/apps/site/src/data/accordion/controlled-accordion.tsx
deleted file mode 100644
index 3dc6935c5..000000000
--- a/apps/site/src/data/accordion/controlled-accordion.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-export function ControlledAccordion() {
-  return (
-    <>
-      

-  

-  

-  

-    
Material Tailwind is an open-source crafted in Tailwind CSS. Get Material Tailwind and take advantage of its free components and features that will help you set up your web project quickly.

-  

-  

-

-
-    
-  )
-}
\ No newline at end of file
diff --git a/apps/site/src/data/accordion/index.ts b/apps/site/src/data/accordion/index.ts
deleted file mode 100644
index 6c4f647fc..000000000
--- a/apps/site/src/data/accordion/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-"use client";
-export * from "./accordion-all-open";
-export * from "./accordion-custom-icon";
-export * from "./accordion-custom-styles";
-export * from "./accordion-demo";
-export * from "./accordion-disabled";
-export * from "./controlled-accordion";
diff --git a/apps/site/src/types/declarations.d.ts b/apps/site/src/types/declarations.d.ts
new file mode 100644
index 000000000..7ee5f9425
--- /dev/null
+++ b/apps/site/src/types/declarations.d.ts
@@ -0,0 +1,11 @@
+// declarations.d.ts
+
+declare module '*.html' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.tsx?raw' {
+  const content: string;
+  export default content;
+}

From 1b4e934d84cdd7d72e2efb9c3d85ab97be87fa48 Mon Sep 17 00:00:00 2001
From: Beniamin Marcu 
Date: Wed, 20 Nov 2024 14:51:33 +0200
Subject: [PATCH 12/29] Update package.json

---
 apps/site/package.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/site/package.json b/apps/site/package.json
index d5d33ec24..3b65dec03 100644
--- a/apps/site/package.json
+++ b/apps/site/package.json
@@ -36,12 +36,14 @@
     "next-mdx-remote": "5.0.0",
     "next-nprogress-bar": "2.3.13",
     "next-themes": "0.2.1",
+    "prettier": "3.3.3",
     "raw-loader": "4.0.2",
     "react": "18.2.0",
     "react-apexcharts": "1.4.1",
     "react-day-picker": "8.10.0",
     "react-dom": "18.2.0",
     "react-hook-form": "7.51.2",
+    "react-syntax-highlighter": "15.6.1",
     "rehype-autolink-headings": "7.0.0",
     "rehype-pretty-code": "0.3.2",
     "rehype-slug": "6.0.0",

From f60a810de54b6666a00c86eec8445d819a4ce407 Mon Sep 17 00:00:00 2001
From: Beniamin Marcu 
Date: Wed, 20 Nov 2024 14:51:39 +0200
Subject: [PATCH 13/29] Update page.tsx

---
 apps/site/src/app/docs/[...slug]/page.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/site/src/app/docs/[...slug]/page.tsx b/apps/site/src/app/docs/[...slug]/page.tsx
index e5380f202..1c0cf5b35 100644
--- a/apps/site/src/app/docs/[...slug]/page.tsx
+++ b/apps/site/src/app/docs/[...slug]/page.tsx
@@ -109,7 +109,7 @@ import * as HTMLAccordion from "@components/docs-html/accordion";
 
 import CodeSnippet from '@components/CodeSnippet';
 import ComponentPreview from '@components/ComponentPreview';
-import CodeSection from '@components/CodeSection';
+import PreviewWithCode from '@components/PreviewWithCode';
 
 async function readDocsContentFn(pathUrl: string) {
   const fullPath = `${path.join(
@@ -208,6 +208,8 @@ export default async function Docs({ params: { slug } }) {
           ColorPalette,
           FrameworkCard,
           ComponentPreview,
+          PreviewWithCode,
+          CodeSnippet,
 
           // default-components
           pre: Code,
@@ -368,8 +370,6 @@ export default async function Docs({ params: { slug } }) {
           HTMLSwitch,
           HTMLBadge,
           HTMLAccordion,
-          CodeSnippet,
-          CodeSection
         }}
       />
     

From e5d31d83e246aee33e186f7085819dd407770f4f Mon Sep 17 00:00:00 2001
From: Beniamin Marcu 
Date: Wed, 20 Nov 2024 14:51:42 +0200
Subject: [PATCH 14/29] Delete CodeSection.tsx

---
 apps/site/src/components/CodeSection.tsx | 26 ------------------------
 1 file changed, 26 deletions(-)
 delete mode 100644 apps/site/src/components/CodeSection.tsx

diff --git a/apps/site/src/components/CodeSection.tsx b/apps/site/src/components/CodeSection.tsx
deleted file mode 100644
index 7fad90909..000000000
--- a/apps/site/src/components/CodeSection.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-"use client";
-// pages/your-page.tsx or wherever your component is
-
-// import tsxCodeContent from '../components/docs/accordion/accordion-demo.tsx?raw';
-import tsxCodeContent from '!!raw-loader!../components/docs/accordion/accordion-demo.tsx';
-
-// import htmlCodeContent from '../components/docs-html/accordion/accordion-demo.tsx?raw';
-import htmlCodeContent from '!!raw-loader!../components/docs-html/accordion/accordion-demo.tsx';
-
-import ComponentPreview from '../components/ComponentPreview';
-
-import CodeSnippet from '../components/CodeSnippet';
-
-function CodeSection() {
-  return (
-    

-      
-      
React Component:

-      
-      
HTML:

-      
-    

-  );
-};
-
-export default CodeSection;

From 6c2a1be7a4c05c751df0dcdf6dd61a74090b53c1 Mon Sep 17 00:00:00 2001
From: Beniamin Marcu 
Date: Wed, 20 Nov 2024 14:51:44 +0200
Subject: [PATCH 15/29] Create PreviewWithCode.tsx

---
 apps/site/src/components/PreviewWithCode.tsx | 36 ++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 apps/site/src/components/PreviewWithCode.tsx

diff --git a/apps/site/src/components/PreviewWithCode.tsx b/apps/site/src/components/PreviewWithCode.tsx
new file mode 100644
index 000000000..2323b0de5
--- /dev/null
+++ b/apps/site/src/components/PreviewWithCode.tsx
@@ -0,0 +1,36 @@
+import ComponentPreview from './ComponentPreview';
+
+import CodeSnippet from './CodeSnippet';
+
+async function PreviewWithCode({relativePath, language}: {relativePath: string, language: string}) {
+
+  let codeModule;
+
+  if (language === "html") {
+    codeModule = await import(
+      `!!raw-loader!../components/docs-html/${relativePath}`
+    );
+  } else {
+    codeModule = await import(
+      `!!raw-loader!../components/docs/${relativePath}`
+    );
+  }
+
+  // const tsxModule = await import(
+  //   `!!raw-loader!../components/docs/${relativePath}`
+  // );
+  // const htmlModule = await import(
+  //   `!!raw-loader!../components/docs-html/${relativePath}`
+  // );
+
+  const codeContent = codeModule.default;
+
+  return (
+    <>
+      
+      
+    
+  );
+};
+
+export default PreviewWithCode;

From 4878346e202dfb1388e05616d28ee1fef344dadf Mon Sep 17 00:00:00 2001
From: Beniamin Marcu 
Date: Wed, 20 Nov 2024 14:51:51 +0200
Subject: [PATCH 16/29] Update accordion-demo.tsx

---
 apps/site/src/components/docs-html/accordion/accordion-demo.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/site/src/components/docs-html/accordion/accordion-demo.tsx b/apps/site/src/components/docs-html/accordion/accordion-demo.tsx
index 403370de5..5af10db62 100644
--- a/apps/site/src/components/docs-html/accordion/accordion-demo.tsx
+++ b/apps/site/src/components/docs-html/accordion/accordion-demo.tsx
@@ -121,7 +121,7 @@ function AccordionDemo () {
   

 

 
-
+
 
-```
-
-
+
 
 ---
 
 ## Alert Custom Close Icon
 
 You can use any DOM element as the alert closing icon.
-
-}>
-```html
-
-
-
-
-```
-
+
 
 ---
 
@@ -556,110 +75,11 @@ You can use any DOM element as the alert closing icon.
 
 Use the example below to use an alert component with content elements like title and description.
 
-}>
-```html
-
-
-
-
-```
-
+
 
 
 ---
 
 ## Alert Custom Styles
 
-}>
-```html
-
-```
-
+
\ No newline at end of file
diff --git a/apps/site/src/app/docs/content/html/test.mdx b/apps/site/src/app/docs/content/html/test.mdx
index 810410073..99efb1acf 100644
--- a/apps/site/src/app/docs/content/html/test.mdx
+++ b/apps/site/src/app/docs/content/html/test.mdx
@@ -6,24 +6,13 @@ prev: docs/react/text-area
 next: docs/react/avatar
 ---
 
-
-import ComponentPreview from '@components/ComponentPreview';
-import CodeSnippet from '@components/CodeSnippet';
-
 # Tailwind CSS Accordion
 
 

   
Test

   
Test page

-  ```html
 
-
 
-  ```
   
 
 

\ No newline at end of file
diff --git a/apps/site/src/components/ComponentPreview.tsx b/apps/site/src/components/ComponentPreview.tsx
index e6d2eed01..a1fc2a6e3 100644
--- a/apps/site/src/components/ComponentPreview.tsx
+++ b/apps/site/src/components/ComponentPreview.tsx
@@ -7,8 +7,8 @@ interface ComponentPreviewProps {
 }
 
 function ComponentPreview({ componentPath }: ComponentPreviewProps) {
-  // const Component = React.lazy(() => import(componentPath));
-  const Component = React.lazy(() => import(`${componentPath}`));
+  console.log('componentPath', componentPath);
+  const Component = React.lazy(async () => await import(`${componentPath}`));
 
   return (
     Loading...
}>
diff --git a/apps/site/src/components/PreviewWithCode.tsx b/apps/site/src/components/PreviewWithCode.tsx
index 2323b0de5..a2003b936 100644
--- a/apps/site/src/components/PreviewWithCode.tsx
+++ b/apps/site/src/components/PreviewWithCode.tsx
@@ -24,6 +24,7 @@ async function PreviewWithCode({relativePath, language}: {relativePath: string,
   // );
 
   const codeContent = codeModule.default;
+  console.log('relativePath', relativePath);
 
   return (
     <>
diff --git a/apps/site/src/components/docs-html/alert/alert-colors.tsx b/apps/site/src/components/docs-html/alert/alert-colors.tsx
index c6390aa77..14df0fb77 100644
--- a/apps/site/src/components/docs-html/alert/alert-colors.tsx
+++ b/apps/site/src/components/docs-html/alert/alert-colors.tsx
@@ -1,54 +1,60 @@
 export function AlertColors() {
   return (
-    

-      

-        

-          A simple alert for showing message, with color="primary"
-        

-      

-      

-        

-          A simple alert for showing message, with color="secondary"
-        

-      

-      

-        

-          A simple alert for showing message, with color="info"
-        

-      

-      

-        

-          A simple alert for showing message, with color="success"
-        

-      

-      

-        

-          A simple alert for showing message, with color="warning"
-        

-      

-      

-        

-          A simple alert for showing message, with color="error"
-        

-      

+    

+  
+  
+  
+  
+  
+  
+

+    `,
+      }}
+    />
   );
 }
diff --git a/apps/site/src/components/docs-html/alert/alert-custom-close-icon.tsx b/apps/site/src/components/docs-html/alert/alert-custom-close-icon.tsx
index ff1d08b4e..9ce5c985d 100644
--- a/apps/site/src/components/docs-html/alert/alert-custom-close-icon.tsx
+++ b/apps/site/src/components/docs-html/alert/alert-custom-close-icon.tsx
@@ -1,50 +1,56 @@
-"use client";
-import { useEffect } from "react";
-
 export function AlertCustomCloseIcon() {
-  useEffect(() => {
-    const alert = document.querySelector("#alert2");
-    const alertCloseTrigger = document.querySelector("#alert-close-trigger");
-
-    if (alert && alertCloseTrigger) {
-      alertCloseTrigger.addEventListener("click", () => {
-        alert.remove();
-      });
-    }
-  }, []);
   return (
     
+      
+    
+  
+  

+    Sorry, something went wrong please try again.
+  

+  
+

+
+
+        `
+      }}
+    />
   );
 }
diff --git a/apps/site/src/components/docs-html/alert/alert-custom-styles.tsx b/apps/site/src/components/docs-html/alert/alert-custom-styles.tsx
index d611f788e..4e86a6eaf 100644
--- a/apps/site/src/components/docs-html/alert/alert-custom-styles.tsx
+++ b/apps/site/src/components/docs-html/alert/alert-custom-styles.tsx
@@ -1,30 +1,36 @@
 export function AlertCustomStyles() {
   return (
     
+      
+    
+  
+  

+    A simple alert for showing message.
+  

+
+`,
+      }}
+    />
   );
 }
diff --git a/apps/site/src/components/docs-html/alert/alert-demo.tsx b/apps/site/src/components/docs-html/alert/alert-demo.tsx
index b0bdacf9a..72742c598 100644
--- a/apps/site/src/components/docs-html/alert/alert-demo.tsx
+++ b/apps/site/src/components/docs-html/alert/alert-demo.tsx
@@ -1,12 +1,18 @@
 export function AlertDemo() {
   return (
     

-      

-        A simple alert for showing message.
-      

-    

+      dangerouslySetInnerHTML={{
+        __html: `
+
+`,
+      }}
+    />
   );
 }
diff --git a/apps/site/src/components/docs-html/alert/alert-dismissible.tsx b/apps/site/src/components/docs-html/alert/alert-dismissible.tsx
index 21760a2a8..7564154f8 100644
--- a/apps/site/src/components/docs-html/alert/alert-dismissible.tsx
+++ b/apps/site/src/components/docs-html/alert/alert-dismissible.tsx
@@ -1,77 +1,80 @@
-"use client";
-
-import * as React from "react";
-
 export function AlertDismissible() {
-  React.useEffect(() => {
-    const alert = document.querySelector("#alert");
-    const alertDismissTrigger = document.querySelector(
-      "#alert-dismiss-trigger",
-    );
-
-    if (alert && alertDismissTrigger) {
-      alertDismissTrigger.addEventListener("click", () => {
-        alert.remove();
-      });
-    }
-  }, []);
-
   return (
     
+      
+    
+  
+
+
+
+
+        `
+      }}
+    />
   );
 }
diff --git a/apps/site/src/components/docs-html/alert/alert-icon.tsx b/apps/site/src/components/docs-html/alert/alert-icon.tsx
index 40f93af33..c5eb53a27 100644
--- a/apps/site/src/components/docs-html/alert/alert-icon.tsx
+++ b/apps/site/src/components/docs-html/alert/alert-icon.tsx
@@ -1,43 +1,49 @@
 export function AlertIcon() {
   return (
     
+      
+      
+      
+    
+  
+  

+    A simple alert for showing message.
+  

+
+`,
+      }}
+    />
   );
 }
diff --git a/apps/site/src/components/docs-html/alert/alert-variants.tsx b/apps/site/src/components/docs-html/alert/alert-variants.tsx
index 0a0e57582..2281738a0 100644
--- a/apps/site/src/components/docs-html/alert/alert-variants.tsx
+++ b/apps/site/src/components/docs-html/alert/alert-variants.tsx
@@ -1,38 +1,44 @@
 export function AlertVariants() {
   return (
-    

-      

-        

-          A simple alert for showing message, with variant="ghost"
-        

-      

-      

-        

-          A simple alert for showing message. with variant="outline"
-        

-      

-      

-        

-          A simple alert for showing message. with variant="solid"
-        

-      

-      

-        

-          A simple alert for showing message. with variant="gradient"
-        

-      

+    

+  
+  
+  
+  
+

+    `,
+      }}
+    />
   );
 }
diff --git a/apps/site/src/components/docs-html/alert/alert-with-content.tsx b/apps/site/src/components/docs-html/alert/alert-with-content.tsx
index 7e28bd8f6..52b427939 100644
--- a/apps/site/src/components/docs-html/alert/alert-with-content.tsx
+++ b/apps/site/src/components/docs-html/alert/alert-with-content.tsx
@@ -1,71 +1,77 @@
-"use client";
-
-import * as React from "react";
-
 export function AlertWithContent() {
-  React.useEffect(() => {
-    const alert = document.querySelector("#alert-content");
-    const alertDismissTrigger = document.querySelector(
-      "#content-close-trigger",
-    );
-
-    if (alert && alertDismissTrigger) {
-      alertDismissTrigger.addEventListener("click", () => {
-        alert.remove();
-      });
-    }
-  }, []);
-
   return (
     
+      
+    
+  
+  

+    

+      Success
+    

+    

+      I don't know what that word means. I'm happy. But success, that goes
+      back to what in somebody's eyes success means. For me, success is
+      inner peace. That's a good day for me.
+    

+  

+  
+

+
+
+
+        `
+      }}
+    />
   );
 }
diff --git a/apps/site/src/components/docs-html/alert/alert-with-list.tsx b/apps/site/src/components/docs-html/alert/alert-with-list.tsx
index 6e056c00a..9f58ffbdc 100644
--- a/apps/site/src/components/docs-html/alert/alert-with-list.tsx
+++ b/apps/site/src/components/docs-html/alert/alert-with-list.tsx
@@ -1,214 +1,220 @@
 export function AlertWithList() {
   return (
-    

-      
+

+`,
+      }}
+    />
   );
 }
diff --git a/apps/site/src/components/docs/accordion/accordion-custom-icon.tsx b/apps/site/src/components/docs/accordion/accordion-custom-icon.tsx
index 2d242c31a..46fd047ca 100644
--- a/apps/site/src/components/docs/accordion/accordion-custom-icon.tsx
+++ b/apps/site/src/components/docs/accordion/accordion-custom-icon.tsx
@@ -1,7 +1,7 @@
 import { Accordion } from "@material-tailwind/react";
 import { Minus, Plus } from "iconoir-react";
 
-export function AccordionCustomIcon() {
+export default function AccordionCustomIcon() {
   return (
     
       
diff --git a/apps/site/src/components/docs/accordion/accordion-custom-styles.tsx b/apps/site/src/components/docs/accordion/accordion-custom-styles.tsx
index eb9f480b3..9029b0a73 100644
--- a/apps/site/src/components/docs/accordion/accordion-custom-styles.tsx
+++ b/apps/site/src/components/docs/accordion/accordion-custom-styles.tsx
@@ -1,7 +1,7 @@
 import { Accordion } from "@material-tailwind/react";
 import { NavArrowDown } from "iconoir-react";
 
-export function AccordionCustomStyles() {
+export default function AccordionCustomStyles() {
   return (
     
       
       
diff --git a/apps/site/src/components/docs/accordion/controlled-accordion.tsx b/apps/site/src/components/docs/accordion/controlled-accordion.tsx
index 89349562a..cee4fe546 100644
--- a/apps/site/src/components/docs/accordion/controlled-accordion.tsx
+++ b/apps/site/src/components/docs/accordion/controlled-accordion.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import { Accordion, Button } from "@material-tailwind/react";
 import { NavArrowDown } from "iconoir-react";
 
-export function ControlledAccordion() {
+export default function ControlledAccordion() {
   const [open, setOpen] = React.useState("html");
 
   return (
diff --git a/apps/site/src/components/docs/alert/alert-colors.tsx b/apps/site/src/components/docs/alert/alert-colors.tsx
index e608653b3..fe7289f07 100644
--- a/apps/site/src/components/docs/alert/alert-colors.tsx
+++ b/apps/site/src/components/docs/alert/alert-colors.tsx
@@ -1,6 +1,6 @@
 import { Alert } from "@material-tailwind/react";
 
-export function AlertColors() {
+export default function AlertColors() {
   return (
     

       
diff --git a/apps/site/src/components/docs/alert/alert-custom-close-icon.tsx b/apps/site/src/components/docs/alert/alert-custom-close-icon.tsx
index b08d8663b..44b0db5d1 100644
--- a/apps/site/src/components/docs/alert/alert-custom-close-icon.tsx
+++ b/apps/site/src/components/docs/alert/alert-custom-close-icon.tsx
@@ -1,7 +1,7 @@
 import { Alert, Button } from "@material-tailwind/react";
 import { WarningCircleSolid } from "iconoir-react";
 
-export function AlertCustomCloseIcon() {
+export default function AlertCustomCloseIcon() {
   return (
     
       
diff --git a/apps/site/src/components/docs/alert/alert-custom-styles.tsx b/apps/site/src/components/docs/alert/alert-custom-styles.tsx
index 089ff2d1c..5690c2923 100644
--- a/apps/site/src/components/docs/alert/alert-custom-styles.tsx
+++ b/apps/site/src/components/docs/alert/alert-custom-styles.tsx
@@ -1,7 +1,7 @@
 import { Alert } from "@material-tailwind/react";
 import { CheckCircleSolid } from "iconoir-react";
 
-export function AlertCustomStyles() {
+export default function AlertCustomStyles() {
   return (
     
       
diff --git a/apps/site/src/components/docs/alert/alert-demo.tsx b/apps/site/src/components/docs/alert/alert-demo.tsx
index 3f8764c49..98872cd8e 100644
--- a/apps/site/src/components/docs/alert/alert-demo.tsx
+++ b/apps/site/src/components/docs/alert/alert-demo.tsx
@@ -1,6 +1,6 @@
 import { Alert } from "@material-tailwind/react";
 
-export function AlertDemo() {
+export default function AlertDemo() {
   return (
     
       A simple alert for showing message.
diff --git a/apps/site/src/components/docs/alert/alert-dismissible.tsx b/apps/site/src/components/docs/alert/alert-dismissible.tsx
index c6508e72d..9d1b6d74d 100644
--- a/apps/site/src/components/docs/alert/alert-dismissible.tsx
+++ b/apps/site/src/components/docs/alert/alert-dismissible.tsx
@@ -1,7 +1,7 @@
 import { Alert } from "@material-tailwind/react";
 import { WarningCircle } from "iconoir-react";
 
-export function AlertDismissible() {
+export default function AlertDismissible() {
   return (
     
       
diff --git a/apps/site/src/components/docs/alert/alert-icon.tsx b/apps/site/src/components/docs/alert/alert-icon.tsx
index a1cb337e9..cd781d80e 100644
--- a/apps/site/src/components/docs/alert/alert-icon.tsx
+++ b/apps/site/src/components/docs/alert/alert-icon.tsx
@@ -1,7 +1,7 @@
 import { Alert } from "@material-tailwind/react";
 import { WarningCircle } from "iconoir-react";
 
-export function AlertIcon() {
+export default function AlertIcon() {
   return (
     
       
diff --git a/apps/site/src/components/docs/alert/alert-variants.tsx b/apps/site/src/components/docs/alert/alert-variants.tsx
index d34047177..0ad26c7eb 100644
--- a/apps/site/src/components/docs/alert/alert-variants.tsx
+++ b/apps/site/src/components/docs/alert/alert-variants.tsx
@@ -1,6 +1,6 @@
 import { Alert } from "@material-tailwind/react";
 
-export function AlertVariants() {
+export default function AlertVariants() {
   return (
     

       
diff --git a/apps/site/src/components/docs/alert/alert-with-content.tsx b/apps/site/src/components/docs/alert/alert-with-content.tsx
index 08b40d2ed..6cfdce8a4 100644
--- a/apps/site/src/components/docs/alert/alert-with-content.tsx
+++ b/apps/site/src/components/docs/alert/alert-with-content.tsx
@@ -1,7 +1,7 @@
 import { Alert, Typography } from "@material-tailwind/react";
 import { CheckCircleSolid } from "iconoir-react";
 
-export function AlertWithContent() {
+export default function AlertWithContent() {
   return (
     
       
diff --git a/apps/site/src/components/docs/alert/alert-with-list.tsx b/apps/site/src/components/docs/alert/alert-with-list.tsx
index f49c12e9f..a663b3095 100644
--- a/apps/site/src/components/docs/alert/alert-with-list.tsx
+++ b/apps/site/src/components/docs/alert/alert-with-list.tsx
@@ -1,7 +1,7 @@
 import { Alert, Typography } from "@material-tailwind/react";
 import { WarningCircle } from "iconoir-react";
 
-export function AlertWithList() {
+export default function AlertWithList() {
   return (
     

       
diff --git a/apps/site/src/components/docs/avatar/avatar-custom-styles.tsx b/apps/site/src/components/docs/avatar/avatar-custom-styles.tsx
index 91e0eae74..4202af024 100644
--- a/apps/site/src/components/docs/avatar/avatar-custom-styles.tsx
+++ b/apps/site/src/components/docs/avatar/avatar-custom-styles.tsx
@@ -1,6 +1,6 @@
 import { Avatar } from "@material-tailwind/react";
 
-export function AvatarCustomStyles() {
+export default function AvatarCustomStyles() {
   return (
     ;
 }
diff --git a/apps/site/src/components/docs/avatar/avatar-sizes.tsx b/apps/site/src/components/docs/avatar/avatar-sizes.tsx
index cf211aa01..37201cd25 100644
--- a/apps/site/src/components/docs/avatar/avatar-sizes.tsx
+++ b/apps/site/src/components/docs/avatar/avatar-sizes.tsx
@@ -1,6 +1,6 @@
 import { Avatar } from "@material-tailwind/react";
 
-export function AvatarSizes() {
+export default function AvatarSizes() {
   return (
     

       
diff --git a/apps/site/src/components/docs/avatar/avatar-stack.tsx b/apps/site/src/components/docs/avatar/avatar-stack.tsx
index f439b1154..94e4eba9c 100644
--- a/apps/site/src/components/docs/avatar/avatar-stack.tsx
+++ b/apps/site/src/components/docs/avatar/avatar-stack.tsx
@@ -1,6 +1,6 @@
 import { Avatar } from "@material-tailwind/react";
 
-export function AvatarStack() {
+export default function AvatarStack() {
   return (
     

       
       
       

diff --git a/apps/site/src/components/docs/badge/badge-colors.tsx b/apps/site/src/components/docs/badge/badge-colors.tsx
index ab82789ae..b8cf54e68 100644
--- a/apps/site/src/components/docs/badge/badge-colors.tsx
+++ b/apps/site/src/components/docs/badge/badge-colors.tsx
@@ -1,7 +1,7 @@
 import { Badge, IconButton } from "@material-tailwind/react";
 import { Bell } from "iconoir-react";
 
-export function BadgeColors() {
+export default function BadgeColors() {
   return (
     

       
diff --git a/apps/site/src/components/docs/badge/badge-custom-styles.tsx b/apps/site/src/components/docs/badge/badge-custom-styles.tsx
index 17e029be6..0aef9182d 100644
--- a/apps/site/src/components/docs/badge/badge-custom-styles.tsx
+++ b/apps/site/src/components/docs/badge/badge-custom-styles.tsx
@@ -1,7 +1,7 @@
 import { Badge, IconButton } from "@material-tailwind/react";
 import { Bell, Check } from "iconoir-react";
 
-export function BadgeCustomStyles() {
+export default function BadgeCustomStyles() {
   return (
     
       
diff --git a/apps/site/src/components/docs/badge/badge-demo.tsx b/apps/site/src/components/docs/badge/badge-demo.tsx
index 68923561d..c7a8670c4 100644
--- a/apps/site/src/components/docs/badge/badge-demo.tsx
+++ b/apps/site/src/components/docs/badge/badge-demo.tsx
@@ -1,7 +1,7 @@
 import { Badge, IconButton } from "@material-tailwind/react";
 import { Bell } from "iconoir-react";
 
-export function BadgeDemo() {
+export default function BadgeDemo() {
   return (
     
       
diff --git a/apps/site/src/components/docs/badge/badge-dot.tsx b/apps/site/src/components/docs/badge/badge-dot.tsx
index 8e8eba41e..b13005b73 100644
--- a/apps/site/src/components/docs/badge/badge-dot.tsx
+++ b/apps/site/src/components/docs/badge/badge-dot.tsx
@@ -1,7 +1,7 @@
 import { Badge, IconButton } from "@material-tailwind/react";
 import { Bell } from "iconoir-react";
 
-export function BadgeDot() {
+export default function BadgeDot() {
   return (
     
       
diff --git a/apps/site/src/components/docs/badge/badge-overlap.tsx b/apps/site/src/components/docs/badge/badge-overlap.tsx
index 5f2d1133a..787404b94 100644
--- a/apps/site/src/components/docs/badge/badge-overlap.tsx
+++ b/apps/site/src/components/docs/badge/badge-overlap.tsx
@@ -1,7 +1,7 @@
 import { Badge, IconButton, Avatar } from "@material-tailwind/react";
 import { Bell } from "iconoir-react";
 
-export function BadgeOverlap() {
+export default function BadgeOverlap() {
   return (
     

       
diff --git a/apps/site/src/components/docs/badge/badge-placement.tsx b/apps/site/src/components/docs/badge/badge-placement.tsx
index f1f0d9879..4ef02e0fd 100644
--- a/apps/site/src/components/docs/badge/badge-placement.tsx
+++ b/apps/site/src/components/docs/badge/badge-placement.tsx
@@ -1,7 +1,7 @@
 import { Badge, IconButton } from "@material-tailwind/react";
 import { Bell } from "iconoir-react";
 
-export function BadgePlacement() {
+export default function BadgePlacement() {
   return (
     

       
diff --git a/apps/site/src/components/docs/badge/badge-with-border.tsx b/apps/site/src/components/docs/badge/badge-with-border.tsx
index ef297a0cb..dbe0020f0 100644
--- a/apps/site/src/components/docs/badge/badge-with-border.tsx
+++ b/apps/site/src/components/docs/badge/badge-with-border.tsx
@@ -1,7 +1,7 @@
 import { Badge, IconButton } from "@material-tailwind/react";
 import { Bell } from "iconoir-react";
 
-export function BadgeWithBorder() {
+export default function BadgeWithBorder() {
   return (
     
       
diff --git a/apps/site/src/components/docs/breadcrumb/breadcrumb-custom-separator.tsx b/apps/site/src/components/docs/breadcrumb/breadcrumb-custom-separator.tsx
index 2d89db102..afb29fa40 100644
--- a/apps/site/src/components/docs/breadcrumb/breadcrumb-custom-separator.tsx
+++ b/apps/site/src/components/docs/breadcrumb/breadcrumb-custom-separator.tsx
@@ -1,6 +1,6 @@
 import { Breadcrumb } from "@material-tailwind/react";
 
-export function BreadcrumbCustomSeparator() {
+export default function BreadcrumbCustomSeparator() {
   return (
     
       Docs
diff --git a/apps/site/src/components/docs/breadcrumb/breadcrumb-custom-styles.tsx b/apps/site/src/components/docs/breadcrumb/breadcrumb-custom-styles.tsx
index cea816fa2..2e6bf7f88 100644
--- a/apps/site/src/components/docs/breadcrumb/breadcrumb-custom-styles.tsx
+++ b/apps/site/src/components/docs/breadcrumb/breadcrumb-custom-styles.tsx
@@ -6,7 +6,7 @@ import {
   NavArrowRight,
 } from "iconoir-react";
 
-export function BreadcrumbCustomStyles() {
+export default function BreadcrumbCustomStyles() {
   return (
     
       
       Docs
diff --git a/apps/site/src/components/docs/breadcrumb/breadcrumb-with-icon.tsx b/apps/site/src/components/docs/breadcrumb/breadcrumb-with-icon.tsx
index 095cb838a..8f8ac9cf6 100644
--- a/apps/site/src/components/docs/breadcrumb/breadcrumb-with-icon.tsx
+++ b/apps/site/src/components/docs/breadcrumb/breadcrumb-with-icon.tsx
@@ -1,7 +1,7 @@
 import { Breadcrumb } from "@material-tailwind/react";
 import { HomeSimple } from "iconoir-react";
 
-export function BreadcrumbWithIcon() {
+export default function BreadcrumbWithIcon() {
   return (
     
       
diff --git a/apps/site/src/components/docs/button-group/block-level-button-group.tsx b/apps/site/src/components/docs/button-group/block-level-button-group.tsx
index 405e2f7b8..32e59e68f 100644
--- a/apps/site/src/components/docs/button-group/block-level-button-group.tsx
+++ b/apps/site/src/components/docs/button-group/block-level-button-group.tsx
@@ -1,6 +1,6 @@
 import { ButtonGroup, Button } from "@material-tailwind/react";
 
-export function BlockLevelButtonGroup() {
+export default function BlockLevelButtonGroup() {
   return (
     

       
diff --git a/apps/site/src/components/docs/button-group/button-group-colors.tsx b/apps/site/src/components/docs/button-group/button-group-colors.tsx
index 7f9fff23c..f3ad880f8 100644
--- a/apps/site/src/components/docs/button-group/button-group-colors.tsx
+++ b/apps/site/src/components/docs/button-group/button-group-colors.tsx
@@ -1,6 +1,6 @@
 import { ButtonGroup, Button } from "@material-tailwind/react";
 
-export function ButtonGroupColors() {
+export default function ButtonGroupColors() {
   return (
     

       
diff --git a/apps/site/src/components/docs/button-group/button-group-demo.tsx b/apps/site/src/components/docs/button-group/button-group-demo.tsx
index f5a60fdff..d29200b03 100644
--- a/apps/site/src/components/docs/button-group/button-group-demo.tsx
+++ b/apps/site/src/components/docs/button-group/button-group-demo.tsx
@@ -1,6 +1,6 @@
 import { ButtonGroup, Button } from "@material-tailwind/react";
 
-export function ButtonGroupDemo() {
+export default function ButtonGroupDemo() {
   return (
     
       
diff --git a/apps/site/src/components/docs/button-group/button-group-sizes.tsx b/apps/site/src/components/docs/button-group/button-group-sizes.tsx
index 82f96c69c..84320f110 100644
--- a/apps/site/src/components/docs/button-group/button-group-sizes.tsx
+++ b/apps/site/src/components/docs/button-group/button-group-sizes.tsx
@@ -1,6 +1,6 @@
 import { ButtonGroup, Button } from "@material-tailwind/react";
 
-export function ButtonGroupSizes() {
+export default function ButtonGroupSizes() {
   return (
     

       
diff --git a/apps/site/src/components/docs/button-group/button-group-variants.tsx b/apps/site/src/components/docs/button-group/button-group-variants.tsx
index bd8c2e25d..15e6e898a 100644
--- a/apps/site/src/components/docs/button-group/button-group-variants.tsx
+++ b/apps/site/src/components/docs/button-group/button-group-variants.tsx
@@ -1,6 +1,6 @@
 import { ButtonGroup, Button } from "@material-tailwind/react";
 
-export function ButtonGroupVariants() {
+export default function ButtonGroupVariants() {
   return (
     

       
diff --git a/apps/site/src/components/docs/button-group/button-group-with-icon.tsx b/apps/site/src/components/docs/button-group/button-group-with-icon.tsx
index 99a4565e7..244cead11 100644
--- a/apps/site/src/components/docs/button-group/button-group-with-icon.tsx
+++ b/apps/site/src/components/docs/button-group/button-group-with-icon.tsx
@@ -1,7 +1,7 @@
 import { ButtonGroup, Button } from "@material-tailwind/react";
 import { Bold, Italic, Underline } from "iconoir-react";
 
-export function ButtonGroupWithIcon() {
+export default function ButtonGroupWithIcon() {
   return (
     

       
diff --git a/apps/site/src/components/docs/button-group/custom-button-group.tsx b/apps/site/src/components/docs/button-group/custom-button-group.tsx
index c943c1c54..bbe212cf9 100644
--- a/apps/site/src/components/docs/button-group/custom-button-group.tsx
+++ b/apps/site/src/components/docs/button-group/custom-button-group.tsx
@@ -1,7 +1,7 @@
 import { ButtonGroup, Button } from "@material-tailwind/react";
 import { Facebook, Dribbble, Linkedin, Instagram } from "iconoir-react";
 
-export function CustomButtonGroup() {
+export default function CustomButtonGroup() {
   return (
     
       
diff --git a/apps/site/src/components/docs/button/button-demo.tsx b/apps/site/src/components/docs/button/button-demo.tsx
index d33dd7721..eb511de31 100644
--- a/apps/site/src/components/docs/button/button-demo.tsx
+++ b/apps/site/src/components/docs/button/button-demo.tsx
@@ -1,5 +1,5 @@
 import { Button } from "@material-tailwind/react";
 
-export function ButtonDemo() {
+export default function ButtonDemo() {
   return ;
 }
diff --git a/apps/site/src/components/docs/button/button-loading.tsx b/apps/site/src/components/docs/button/button-loading.tsx
index e9336501c..53ebe38f3 100644
--- a/apps/site/src/components/docs/button/button-loading.tsx
+++ b/apps/site/src/components/docs/button/button-loading.tsx
@@ -1,6 +1,6 @@
 import { Button, Spinner } from "@material-tailwind/react";
 
-export function ButtonLoading() {
+export default function ButtonLoading() {
   return (
     

       
diff --git a/apps/site/src/components/docs/button/button-variants.tsx b/apps/site/src/components/docs/button/button-variants.tsx
index 328eb85bf..5a3d2ad55 100644
--- a/apps/site/src/components/docs/button/button-variants.tsx
+++ b/apps/site/src/components/docs/button/button-variants.tsx
@@ -1,6 +1,6 @@
 import { Button } from "@material-tailwind/react";
 
-export function ButtonVariants() {
+export default function ButtonVariants() {
   return (
     

       
diff --git a/apps/site/src/components/docs/button/button-with-icon.tsx b/apps/site/src/components/docs/button/button-with-icon.tsx
index 4d5fca6a3..8a63acace 100644
--- a/apps/site/src/components/docs/button/button-with-icon.tsx
+++ b/apps/site/src/components/docs/button/button-with-icon.tsx
@@ -6,7 +6,7 @@ import {
   BrightStar,
 } from "iconoir-react";
 
-export function ButtonWithIcon() {
+export default function ButtonWithIcon() {
   return (