feat(components): add "Device Mockups"

.changeset/spicy-eels-press.md

@@ -0,0 +1,5 @@
+---
+"flowbite-react": patch
+---
+
+feat(components): add "Device Mockups"

apps/web/components/mdx.tsx

@@ -51,27 +51,25 @@ const components: MDXComponents = {
     </h3>
   ),
   Example: ({ name }: { name: string }) => {
-    function pick<T extends object>(obj: T, path: string): CodeData | undefined {
-      if (!path) return obj as CodeData;
-      const properties = path.split(".");
-      const key = properties.shift() as keyof typeof obj;
-      if (!(key in obj)) return;
-      return pick(obj[key] as T, properties.join("."));
-    }
-
-    const codeData = pick(examples, name);
+    const codeData = get<CodeData>(examples, name);
 
     if (!codeData) return <>{`<Example name="${name}" />`}</>;
 
     return <CodeDemo data={codeData} />;
   },
   Theme: ({ name }: { name: keyof typeof theme }) => {
-    if (!(name in theme)) return <>{`<Theme name="${name}" />`}</>;
+    const value = get(theme, name);
+
+    if (!value) return <>{`<Theme name="${name}" />`}</>;
 
-    return <CodeHighlight code={JSON.stringify(theme[name], null, 2)} language="json" />;
+    return <CodeHighlight code={JSON.stringify(value, null, 2)} language="json" />;
   },
 };
 
+function get<T>(obj: Record<string, any>, path: string): T | undefined {
+  return path.split(".").reduce((acc, key) => acc && acc[key], obj) as T | undefined;
+}
+
 export function Mdx({ code }: { code: string }) {
   const Component = getMDXComponent(code);
 

apps/web/content/docs/components/device-mockups.mdx

@@ -0,0 +1,108 @@
+---
+title: React Device Mockups - Flowbite
+description: Use the device mockups component to add content and screenshot previews of your application inside phone and tablet frames coded with Tailwind CSS and Flowbite
+---
+
+The device mockup component can be used to feature a preview and screenshot of your application as if you would already use it on a mobile phone and it’s a great use case for hero and CTA sections.
+
+This component is built using only the utility classes from Tailwind CSS and has built-in dark mode support so it’s easy to customize, it loads very fast and integrates perfectly with Tailwind CSS and Flowbite.
+
+You can choose from multiple examples of mockups including phone, tablet, laptop, and even desktop devices with iOS or Android support.
+
+To start using the mockup components you need to import them from `flowbite-react`:
+
+```jsx
+import {
+  DefaultMockup,
+  DesktopMockup,
+  GooglePixelMockup,
+  IPhone12Mockup,
+  LaptopMockup,
+  SmartwatchMockup,
+  TabletMockup,
+} from "flowbite-react";
+```
+
+## Default mockup
+
+Use this example to show a standard phone mockup based on Tailwind CSS and add your app screenshot inside of it with dark mode support included.
+
+<Example name="mockup.root" />
+
+## iPhone 12 mockup (iOS)
+
+Use this example to clearly show that the preview of your application is being used on an iPhone with iOS.
+
+<Example name="mockup.iPhone12" />
+
+## Google Pixel (Android)
+
+Use this alternative phone mockup example if you want to feature previews for android gadgets.
+
+<Example name="mockup.googlePixel" />
+
+## Tablet mockup
+
+This component can be used to show an application preview inside of a responsive tablet mockup.
+
+<Example name="mockup.tablet" />
+
+## Laptop mockup
+
+This example can be used to show a screenshot of your application inside a laptop mockup.
+
+<Example name="mockup.laptop" />
+
+## Desktop mockup
+
+Use this example to show a preview of your application inside a desktop device such as an iMac.
+
+<Example name="mockup.desktop" />
+
+## Smartwatch mockup
+
+This component can be used to showcase applications built for smartwatches.
+
+<Example name="mockup.smartwatch" />
+
+## Mockup colors
+
+You can easily update the color of the mockup by changing the background color with Tailwind CSS.
+
+<Example name="mockup.colors" />
+
+## Theme
+
+To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).
+
+### Default mockup theme
+
+<Theme name="mockup.default" />
+
+### iPhone 12 mockup (iOS) theme
+
+<Theme name="mockup.iPhone12" />
+
+### Google Pixel (Android) theme
+
+<Theme name="mockup.googlePixel" />
+
+### Tablet mockup theme
+
+<Theme name="mockup.tablet" />
+
+### Laptop mockup theme
+
+<Theme name="mockup.laptop" />
+
+### Desktop mockup theme
+
+<Theme name="mockup.desktop" />
+
+### Smartwatch mockup theme
+
+<Theme name="mockup.smartwatch" />
+
+## References
+
+- [Flowbite Device Mockups](https://flowbite.com/docs/components/device-mockups/)

apps/web/data/docs-sidebar.ts

@@ -61,6 +61,7 @@ export const DOCS_SIDEBAR: DocsSidebarSection[] = [
       { title: "Carousel", href: "/docs/components/carousel" },
       { title: "Clipboard", href: "/docs/components/clipboard", isNew: true },
       { title: "Datepicker", href: "/docs/components/datepicker" },
+      { title: "Device Mockups", href: "/docs/components/device-mockups", isNew: true },
       { title: "Drawer", href: "/docs/components/drawer", isNew: true },
       { title: "Dropdown", href: "/docs/components/dropdown" },
       { title: "Footer", href: "/docs/components/footer" },

apps/web/examples/index.ts

@@ -22,6 +22,7 @@ export * as kbd from "./kbd";
 export * as list from "./list";
 export * as listGroup from "./listGroup";
 export * as megaMenu from "./megaMenu";
+export * as mockup from "./mockup";
 export * as modal from "./modal";
 export * as navbar from "./navbar";
 export * as pagination from "./pagination";

apps/web/examples/mockup/index.ts

@@ -0,0 +1,8 @@
+export { colors } from "./mockup.colors";
+export { desktop } from "./mockup.desktop";
+export { googlePixel } from "./mockup.googlePixel";
+export { iPhone12 } from "./mockup.iPhone12";
+export { laptop } from "./mockup.laptop";
+export { root } from "./mockup.root";
+export { smartwatch } from "./mockup.smartwatch";
+export { tablet } from "./mockup.tablet";

apps/web/examples/mockup/mockup.colors.tsx

@@ -0,0 +1,80 @@
+import { DefaultMockup, getTheme } from "flowbite-react";
+import { twMerge } from "tailwind-merge";
+import { type CodeData } from "~/components/code-demo";
+
+const code = `
+import { DefaultMockup, getTheme } from "flowbite-react";
+import { twMerge } from "tailwind-merge";
+
+export function Component() {
+  return (
+    <DefaultMockup
+      theme={{
+        root: twMerge(getTheme().mockup.default.root, "border-gray-300"),
+        buttons: {
+          action: twMerge(getTheme().mockup.default.buttons.action, "bg-gray-300"),
+          volumeUp: twMerge(getTheme().mockup.default.buttons.volumeUp, "bg-gray-300"),
+          volumeDown: twMerge(getTheme().mockup.default.buttons.volumeDown, "bg-gray-300"),
+          power: twMerge(getTheme().mockup.default.buttons.power, "bg-gray-300"),
+        },
+      }}
+    >
+      <img
+        src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-1-light.png"
+        className="h-[572px] w-[272px] dark:hidden"
+        alt=""
+      />
+      <img
+        src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-1-dark.png"
+        className="hidden h-[572px] w-[272px] dark:block"
+        alt=""
+      />
+    </DefaultMockup>
+  );
+}
+`;
+
+export function Component() {
+  return (
+    <DefaultMockup
+      theme={{
+        root: twMerge(getTheme().mockup.default.root, "border-gray-300"),
+        buttons: {
+          action: twMerge(getTheme().mockup.default.buttons.action, "bg-gray-300"),
+          volumeUp: twMerge(getTheme().mockup.default.buttons.volumeUp, "bg-gray-300"),
+          volumeDown: twMerge(getTheme().mockup.default.buttons.volumeDown, "bg-gray-300"),
+          power: twMerge(getTheme().mockup.default.buttons.power, "bg-gray-300"),
+        },
+      }}
+    >
+      <img
+        src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-1-light.png"
+        className="h-[572px] w-[272px] dark:hidden"
+        alt=""
+      />
+      <img
+        src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-1-dark.png"
+        className="hidden h-[572px] w-[272px] dark:block"
+        alt=""
+      />
+    </DefaultMockup>
+  );
+}
+
+export const colors: CodeData = {
+  type: "single",
+  code: [
+    {
+      fileName: "client",
+      language: "tsx",
+      code,
+    },
+    {
+      fileName: "server",
+      language: "tsx",
+      code,
+    },
+  ],
+  githubSlug: "mockup/mockup.colors.tsx",
+  component: <Component />,
+};

apps/web/examples/mockup/mockup.desktop.tsx

@@ -0,0 +1,58 @@
+import { DesktopMockup } from "flowbite-react";
+import { type CodeData } from "~/components/code-demo";
+
+const code = `
+import { DesktopMockup } from "flowbite-react";
+
+export function Component() {
+  return (
+    <DesktopMockup>
+      <img
+        src="https://flowbite.s3.amazonaws.com/docs/device-mockups/screen-image-imac.png"
+        className="h-[140px] w-full rounded-xl md:h-[262px] dark:hidden"
+        alt=""
+      />
+      <img
+        src="https://flowbite.s3.amazonaws.com/docs/device-mockups/screen-image-imac-dark.png"
+        className="hidden h-[140px] w-full rounded-xl md:h-[262px] dark:block"
+        alt=""
+      />
+    </DesktopMockup>
+  );
+}
+`;
+
+export function Component() {
+  return (
+    <DesktopMockup>
+      <img
+        src="https://flowbite.s3.amazonaws.com/docs/device-mockups/screen-image-imac.png"
+        className="h-[140px] w-full rounded-xl md:h-[262px] dark:hidden"
+        alt=""
+      />
+      <img
+        src="https://flowbite.s3.amazonaws.com/docs/device-mockups/screen-image-imac-dark.png"
+        className="hidden h-[140px] w-full rounded-xl md:h-[262px] dark:block"
+        alt=""
+      />
+    </DesktopMockup>
+  );
+}
+
+export const desktop: CodeData = {
+  type: "single",
+  code: [
+    {
+      fileName: "client",
+      language: "tsx",
+      code,
+    },
+    {
+      fileName: "server",
+      language: "tsx",
+      code,
+    },
+  ],
+  githubSlug: "mockup/mockup.desktop.tsx",
+  component: <Component />,
+};

apps/web/examples/mockup/mockup.googlePixel.tsx

@@ -0,0 +1,58 @@
+import { GooglePixelMockup } from "flowbite-react";
+import { type CodeData } from "~/components/code-demo";
+
+const code = `
+import { GooglePixelMockup } from "flowbite-react";
+
+export function Component() {
+  return (
+    <GooglePixelMockup>
+      <img
+        src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-1-light.png"
+        className="h-[572px] w-[272px] dark:hidden"
+        alt=""
+      />
+      <img
+        src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-1-dark.png"
+        className="hidden h-[572px] w-[272px] dark:block"
+        alt=""
+      />
+    </GooglePixelMockup>
+  );
+}
+`;
+
+export function Component() {
+  return (
+    <GooglePixelMockup>
+      <img
+        src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-1-light.png"
+        className="h-[572px] w-[272px] dark:hidden"
+        alt=""
+      />
+      <img
+        src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-1-dark.png"
+        className="hidden h-[572px] w-[272px] dark:block"
+        alt=""
+      />
+    </GooglePixelMockup>
+  );
+}
+
+export const googlePixel: CodeData = {
+  type: "single",
+  code: [
+    {
+      fileName: "client",
+      language: "tsx",
+      code,
+    },
+    {
+      fileName: "server",
+      language: "tsx",
+      code,
+    },
+  ],
+  githubSlug: "mockup/mockup.googlePixel.tsx",
+  component: <Component />,
+};