Skip to content

Commit 8c4a546

Browse files
SutuSebastianSutuSebastian
authored
docs: examples - preview iframe opt in (#1364)
1 parent 17e2342 commit 8c4a546

File tree

223 files changed

+738
-638
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

223 files changed

+738
-638
lines changed

‎apps/web/app/examples/[name]/layout.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
"use client";
2+
3+
import { useSearchParams } from "next/navigation";
4+
import type { PropsWithChildren } from "react";
5+
import { twMerge } from "tailwind-merge";
6+
7+
export default function ExamplePageLayout({ children }: PropsWithChildren) {
8+
const searchParams = useSearchParams();
9+
const noPadding = searchParams.get("noPadding");
10+
11+
return <main className={twMerge(noPadding === null && "p-5")}>{children}</main>;
12+
}

‎apps/web/app/examples/[name]/page.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { notFound } from "next/navigation";
2+
3+
interface Props {
4+
params: {
5+
name: string;
6+
};
7+
}
8+
9+
export default async function ExamplePage({ params }: Props) {
10+
try {
11+
const [key] = params.name.split(".");
12+
13+
const { Component } = await import(`~/examples/${key}/${params.name}`);
14+
15+
return Component ? <Component /> : notFound();
16+
} catch (e) {
17+
notFound();
18+
}
19+
}

‎apps/web/components/code-demo.tsx‎

Lines changed: 50 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import { Select, Tooltip, useThemeMode } from "flowbite-react";
44
import type { ComponentProps, PropsWithChildren } from "react";
5-
import { useEffect, useState } from "react";
5+
import { useEffect, useRef, useState } from "react";
66
import type { IconType } from "react-icons";
77
import { FaCopy } from "react-icons/fa";
88
import { HiMoon, HiSun } from "react-icons/hi";
@@ -12,10 +12,18 @@ import { TfiMobile } from "react-icons/tfi";
1212
import { twMerge } from "tailwind-merge";
1313
import { CodeHighlight, type Language } from "./code-highlight";
1414

15+
type IFrameData = number | IFrameOptions;
16+
17+
interface IFrameOptions {
18+
height: number;
19+
noPadding?: boolean;
20+
}
21+
1522
interface BaseCodeData<T extends "single" | "variant"> {
1623
type: T;
1724
githubSlug: string;
1825
component: React.ReactNode;
26+
iframe?: IFrameData;
1927
}
2028

2129
interface VariantCodeData<V extends Variant> extends BaseCodeData<"variant"> {
@@ -135,8 +143,8 @@ export function CodeDemo({ data }: CodeDemoProps) {
135143
</div>
136144
</div>
137145
</div>
138-
<CodePreview view={view} isRTL={isRTL} isDarkMode={isDarkMode}>
139-
{data.component}
146+
<CodePreview view={view} isRTL={isRTL} isDarkMode={isDarkMode} iframe={data.iframe}>
147+
{data.iframe ? <IFrame data={data} isRTL={isRTL} isDarkMode={isDarkMode} /> : data.component}
140148
</CodePreview>
141149
<div className="code-syntax-wrapper">
142150
<div
@@ -173,6 +181,40 @@ export function CodeDemo({ data }: CodeDemoProps) {
173181
);
174182
}
175183

184+
function IFrame({ data, isRTL, isDarkMode }: { data: CodeData; isRTL: boolean; isDarkMode: boolean | null }) {
185+
const ref = useRef<HTMLIFrameElement>(null);
186+
187+
useEffect(() => {
188+
const document = ref.current?.contentDocument;
189+
190+
if (!document) return;
191+
192+
document.documentElement.setAttribute("dir", isRTL ? "rtl" : "ltr");
193+
194+
if (isDarkMode) {
195+
document.documentElement.classList.add("dark");
196+
} else {
197+
document.documentElement.classList.remove("dark");
198+
}
199+
}, [isRTL, isDarkMode]);
200+
201+
function getSrc() {
202+
const base = "/examples";
203+
const target = data.githubSlug.split("/")[1].replace(".tsx", "");
204+
const noPadding = typeof data.iframe === "object" && data.iframe.noPadding ? `?noPadding` : "";
205+
206+
return `${base}/${target}${noPadding}`;
207+
}
208+
209+
function getHeight(): number {
210+
const payload = data.iframe!;
211+
212+
return typeof payload === "number" ? payload : payload.height;
213+
}
214+
215+
return <iframe ref={ref} src={getSrc()} height={getHeight()} className="w-full" />;
216+
}
217+
176218
function Tabs({ tabIndex, items, onSelect }: { tabIndex: number; items: CodeItem[]; onSelect(index: number): void }) {
177219
return (
178220
<ul className="flex flex-1 text-center text-sm font-medium text-gray-500 dark:text-gray-400">
@@ -198,20 +240,22 @@ function CodePreview({
198240
view,
199241
isRTL,
200242
isDarkMode,
243+
iframe,
201244
children,
202-
}: PropsWithChildren<{ view: View; isRTL: boolean; isDarkMode: boolean | null }>) {
245+
}: PropsWithChildren<{ view: View; isRTL: boolean; isDarkMode: boolean | null; iframe?: IFrameData }>) {
203246
return (
204247
<div
205248
{...(isRTL && { dir: "rtl" })}
206249
className={twMerge("code-preview-wrapper", isDarkMode !== null && (isDarkMode ? "dark" : "light"))}
207250
>
208-
<div className="code-preview flex border-x border-gray-200 bg-white bg-gradient-to-r p-0 dark:border-gray-600 dark:bg-gray-900">
251+
<div className="flex border-x border-gray-200 bg-white bg-gradient-to-r p-0 dark:border-gray-600 dark:bg-gray-900">
209252
<div className="code-responsive-wrapper w-full">
210253
<div
211254
className={twMerge(
212-
"mx-auto w-full bg-white bg-gradient-to-r p-5 dark:bg-gray-900",
255+
"mx-auto w-full bg-white bg-gradient-to-r dark:bg-gray-900",
213256
view === "tablet" && "max-w-lg",
214257
view === "mobile" && "max-w-sm",
258+
!iframe && "p-5",
215259
)}
216260
>
217261
{children}

‎apps/web/examples/accordion/accordion.collapseAll.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const code = `
66
77
import { Accordion } from "flowbite-react";
88
9-
function Component() {
9+
export function Component() {
1010
return (
1111
<Accordion collapseAll>
1212
<Accordion.Panel>
@@ -83,7 +83,7 @@ function Component() {
8383
const codeRSC = `
8484
import { Accordion, AccordionContent, AccordionPanel, AccordionTitle } from "flowbite-react";
8585
86-
function Component() {
86+
export function Component() {
8787
return (
8888
<Accordion collapseAll>
8989
<AccordionPanel>
@@ -157,7 +157,7 @@ function Component() {
157157
}
158158
`;
159159

160-
function Component() {
160+
export function Component() {
161161
return (
162162
<Accordion collapseAll>
163163
<AccordionPanel>

‎apps/web/examples/accordion/accordion.root.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const code = `
66
77
import { Accordion } from "flowbite-react";
88
9-
function Component() {
9+
export function Component() {
1010
return (
1111
<Accordion>
1212
<Accordion.Panel>
@@ -83,7 +83,7 @@ function Component() {
8383
const codeRSC = `
8484
import { Accordion, AccordionContent, AccordionPanel, AccordionTitle } from "flowbite-react";
8585
86-
function Component() {
86+
export function Component() {
8787
return (
8888
<Accordion>
8989
<AccordionPanel>
@@ -157,7 +157,7 @@ function Component() {
157157
}
158158
`;
159159

160-
function Component() {
160+
export function Component() {
161161
return (
162162
<Accordion>
163163
<AccordionPanel>

‎apps/web/examples/alert/alert.additionalContent.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const code = `
88
import { HiEye, HiInformationCircle } from "react-icons/hi";
99
import { Alert } from "flowbite-react";
1010
11-
function Component() {
11+
export function Component() {
1212
return (
1313
<Alert additionalContent={<ExampleAdditionalContent />} color="warning" icon={HiInformationCircle}>
1414
<span className="font-medium">Info alert!</span> Change a few things up and try submitting again.
@@ -47,7 +47,7 @@ const codeRSC = `
4747
import { HiEye, HiInformationCircle } from "react-icons/hi";
4848
import { Alert } from "flowbite-react";
4949
50-
function Component() {
50+
export function Component() {
5151
return (
5252
<Alert additionalContent={<ExampleAdditionalContent />} color="warning" icon={HiInformationCircle}>
5353
<span className="font-medium">Info alert!</span> Change a few things up and try submitting again.
@@ -82,7 +82,7 @@ function ExampleAdditionalContent() {
8282
}
8383
`;
8484

85-
function Component() {
85+
export function Component() {
8686
return (
8787
<Alert additionalContent={<ExampleAdditionalContent />} color="warning" icon={HiInformationCircle}>
8888
<span className="font-medium">Info alert!</span> Change a few things up and try submitting again.

‎apps/web/examples/alert/alert.allOptions.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const code = `
88
import { HiEye, HiInformationCircle } from "react-icons/hi";
99
import { Alert } from "flowbite-react";
1010
11-
function Component() {
11+
export function Component() {
1212
return (
1313
<Alert
1414
additionalContent={<ExampleAdditionalContent />}
@@ -23,7 +23,7 @@ function Component() {
2323
}
2424
`;
2525

26-
function Component() {
26+
export function Component() {
2727
return (
2828
<Alert
2929
additionalContent={<ExampleAdditionalContent />}

‎apps/web/examples/alert/alert.borderAccent.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const code = `
66
77
import { Alert } from "flowbite-react";
88
9-
function Component() {
9+
export function Component() {
1010
return (
1111
<Alert color="warning" withBorderAccent>
1212
<span>
@@ -20,7 +20,7 @@ function Component() {
2020
const codeRSC = `
2121
import { Alert } from "flowbite-react";
2222
23-
function Component() {
23+
export function Component() {
2424
return (
2525
<Alert color="warning" withBorderAccent>
2626
<span>
@@ -31,7 +31,7 @@ function Component() {
3131
}
3232
`;
3333

34-
function Component() {
34+
export function Component() {
3535
return (
3636
<Alert color="warning" withBorderAccent>
3737
<span className="font-medium">Info alert!</span> Change a few things up and try submitting again.

‎apps/web/examples/alert/alert.dismissible.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const code = `
88
99
import { Alert } from "flowbite-react";
1010
11-
function Component() {
11+
export function Component() {
1212
return (
1313
<Alert color="success" onDismiss={() => alert('Alert dismissed!')}>
1414
<span className="font-medium">Info alert!</span> Change a few things up and try submitting again.
@@ -17,7 +17,7 @@ function Component() {
1717
}
1818
`;
1919

20-
function Component() {
20+
export function Component() {
2121
return (
2222
<Alert color="success" onDismiss={() => alert("Alert dismissed!")}>
2323
<span className="font-medium">Info alert!</span> Change a few things up and try submitting again.

‎apps/web/examples/alert/alert.root.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const code = `
66
77
import { Alert } from "flowbite-react";
88
9-
function Component() {
9+
export function Component() {
1010
return (
1111
<Alert color="info">
1212
<span className="font-medium">Info alert!</span> Change a few things up and try submitting again.
@@ -18,7 +18,7 @@ function Component() {
1818
const codeRSC = `
1919
import { Alert } from "flowbite-react";
2020
21-
function Component() {
21+
export function Component() {
2222
return (
2323
<Alert color="info">
2424
<span className="font-medium">Info alert!</span> Change a few things up and try submitting again.
@@ -27,7 +27,7 @@ function Component() {
2727
}
2828
`;
2929

30-
function Component() {
30+
export function Component() {
3131
return (
3232
<Alert color="info">
3333
<span className="font-medium">Info alert!</span> Change a few things up and try submitting again.

0 commit comments

Comments
 (0)