feat: adding the android mockup (#456)

magicuidesign · Dec 20, 2024 · bf698d9 · bf698d9
1 parent 862b00f
commit bf698d9
Show file tree

Hide file tree

Showing 11 changed files with 298 additions and 0 deletions.
diff --git a/__registry__/index.tsx b/__registry__/index.tsx
@@ -18,6 +18,19 @@ export const Index: Record<string, any> = {
       subcategory: "undefined",
       chunks: [],
     },
+    android: {
+      name: "android",
+      type: "registry:ui",
+      registryDependencies: undefined,
+      files: ["registry/default/magicui/android.tsx"],
+      component: React.lazy(
+        () => import("@/registry/default/magicui/android.tsx"),
+      ),
+      source: "",
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: [],
+    },
     "morphing-text": {
       name: "morphing-text",
       type: "registry:ui",
@@ -789,6 +802,45 @@ export const Index: Record<string, any> = {
       subcategory: "undefined",
       chunks: [],
     },
+    "android-demo": {
+      name: "android-demo",
+      type: "registry:example",
+      registryDependencies: ["android"],
+      files: ["registry/default/example/android-demo.tsx"],
+      component: React.lazy(
+        () => import("@/registry/default/example/android-demo.tsx"),
+      ),
+      source: "",
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: [],
+    },
+    "android-demo-2": {
+      name: "android-demo-2",
+      type: "registry:example",
+      registryDependencies: ["android"],
+      files: ["registry/default/example/android-demo-2.tsx"],
+      component: React.lazy(
+        () => import("@/registry/default/example/android-demo-2.tsx"),
+      ),
+      source: "",
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: [],
+    },
+    "android-demo-3": {
+      name: "android-demo-3",
+      type: "registry:example",
+      registryDependencies: ["android"],
+      files: ["registry/default/example/android-demo-3.tsx"],
+      component: React.lazy(
+        () => import("@/registry/default/example/android-demo-3.tsx"),
+      ),
+      source: "",
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: [],
+    },
     "morphing-text-demo": {
       name: "morphing-text-demo",
       type: "registry:example",

diff --git a/config/docs.ts b/config/docs.ts
@@ -224,6 +224,12 @@ export const docsConfig: DocsConfig = {
           items: [],
           label: "",
         },
+        {
+          title: "Android",
+          href: `/docs/components/android`,
+          items: [],
+          label: "",
+        },
       ],
     },
     {

diff --git a/content/docs/components/android.mdx b/content/docs/components/android.mdx
@@ -0,0 +1,60 @@
+---
+title: Android
+date: 2024-12-20
+description: A mockup of the Android
+author: dillionverma
+published: true
+---
+
+<ComponentPreview name="android-demo" />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add "https://magicui.design/r/android"
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="android" />
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Examples
+
+### With Image
+
+<ComponentPreview name="android-demo-2" />
+
+### With Video
+
+<ComponentPreview name="android-demo-3" />
+
+## Props
+
+| Prop     | Type   | Description                        | Default |
+| -------- | ------ | ---------------------------------- | ------- |
+| width    | number | The width of the Android window    | 433     |
+| height   | number | The height of the Android window   | 882     |
+| src      | string | The source of the image to display |         |
+| videoSrc | string | The source of the video to display |         |
+
+The `Android` component also accepts all properties of the `SVGElement` type.
diff --git a/public/r/index.json b/public/r/index.json
@@ -12,6 +12,16 @@
       }
     ]
   },
+  {
+    "name": "android",
+    "type": "registry:ui",
+    "files": [
+      {
+        "path": "magicui/android.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
   {
     "name": "morphing-text",
     "type": "registry:ui",

diff --git a/public/r/styles/default/android.json b/public/r/styles/default/android.json
@@ -0,0 +1,12 @@
+{
+  "name": "android",
+  "type": "registry:ui",
+  "files": [
+    {
+      "path": "magicui/android.tsx",
+      "content": "import { SVGProps } from \"react\";\n\nexport interface AndroidProps extends SVGProps<SVGSVGElement> {\n  width?: number;\n  height?: number;\n  src?: string;\n  videoSrc?: string;\n}\n\nexport default function Android({\n  width = 433,\n  height = 882,\n  src,\n  videoSrc,\n  ...props\n}: AndroidProps) {\n  return (\n    <svg\n      width={width}\n      height={height}\n      viewBox={`0 0 ${width} ${height}`}\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <path\n        d=\"M376 153H378C379.105 153 380 153.895 380 155V249C380 250.105 379.105 251 378 251H376V153Z\"\n        className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n      />\n      <path\n        d=\"M376 301H378C379.105 301 380 301.895 380 303V351C380 352.105 379.105 353 378 353H376V301Z\"\n        className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n      />\n      <path\n        d=\"M0 42C0 18.8041 18.804 0 42 0H336C359.196 0 378 18.804 378 42V788C378 811.196 359.196 830 336 830H42C18.804 830 0 811.196 0 788V42Z\"\n        className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n      />\n      <path\n        d=\"M2 43C2 22.0132 19.0132 5 40 5H338C358.987 5 376 22.0132 376 43V787C376 807.987 358.987 825 338 825H40C19.0132 825 2 807.987 2 787V43Z\"\n        className=\"fill-white dark:fill-[#262626]\"\n      />\n\n      <g clip-path=\"url(#clip0_514_20855)\">\n        <path\n          d=\"M9.25 48C9.25 29.3604 24.3604 14.25 43 14.25H335C353.64 14.25 368.75 29.3604 368.75 48V780C368.75 798.64 353.64 813.75 335 813.75H43C24.3604 813.75 9.25 798.64 9.25 780V48Z\"\n          className=\"fill-[#E5E5E5] stroke-[#E5E5E5] stroke-[0.5] dark:fill-[#404040] dark:stroke-[#404040]\"\n        />\n      </g>\n      <circle\n        cx=\"189\"\n        cy=\"28\"\n        r=\"9\"\n        className=\"fill-white dark:fill-[#262626]\"\n      />\n      <circle\n        cx=\"189\"\n        cy=\"28\"\n        r=\"4\"\n        className=\"fill-[#E5E5E5] dark:fill-[#404040]\"\n      />\n      {src && (\n        <image\n          href={src}\n          width=\"360\"\n          height=\"800\"\n          className=\"size-full object-cover\"\n          preserveAspectRatio=\"xMidYMid slice\"\n          clipPath=\"url(#clip0_514_20855)\"\n        />\n      )}\n      {videoSrc && (\n        <foreignObject\n          width=\"380\"\n          height=\"820\"\n          clipPath=\"url(#clip0_514_20855)\"\n          preserveAspectRatio=\"xMidYMid slice\"\n        >\n          <video\n            className=\"size-full object-cover\"\n            src={videoSrc}\n            autoPlay\n            loop\n            muted\n            playsInline\n          />\n        </foreignObject>\n      )}\n      <defs>\n        <clipPath id=\"clip0_514_20855\">\n          <rect\n            width=\"360\"\n            height=\"800\"\n            rx=\"33\"\n            ry=\"25\"\n            className=\"fill-white dark:fill-[#262626]\"\n            transform=\"translate(9 14)\"\n          />\n        </clipPath>\n      </defs>\n    </svg>\n  );\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
diff --git a/registry/default/example/android-demo-2.tsx b/registry/default/example/android-demo-2.tsx
@@ -0,0 +1,12 @@
+import Android from "@/registry/default/magicui/android";
+
+export default function AndroidDemo() {
+  return (
+    <div className="relative">
+      <Android
+        className="size-full"
+        src="https://images.unsplash.com/photo-1730326405863-c6fa7e499a6e?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+      />
+    </div>
+  );
+}
diff --git a/registry/default/example/android-demo-3.tsx b/registry/default/example/android-demo-3.tsx
@@ -0,0 +1,12 @@
+import Android from "@/registry/default/magicui/android";
+
+export default function AndroidDemo() {
+  return (
+    <div className="relative">
+      <Android
+        className="size-full"
+        videoSrc="https://videos.pexels.com/video-files/14993748/14993748-uhd_1296_2304_30fps.mp4"
+      />
+    </div>
+  );
+}
diff --git a/registry/default/example/android-demo.tsx b/registry/default/example/android-demo.tsx
@@ -0,0 +1,9 @@
+import Android from "@/registry/default/magicui/android";
+
+export default function AndroidDemo() {
+  return (
+    <div className="relative">
+      <Android className="size-full" />
+    </div>
+  );
+}
diff --git a/registry/default/magicui/android.tsx b/registry/default/magicui/android.tsx
@@ -0,0 +1,102 @@
+import { SVGProps } from "react";
+
+export interface AndroidProps extends SVGProps<SVGSVGElement> {
+  width?: number;
+  height?: number;
+  src?: string;
+  videoSrc?: string;
+}
+
+export default function Android({
+  width = 433,
+  height = 882,
+  src,
+  videoSrc,
+  ...props
+}: AndroidProps) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox={`0 0 ${width} ${height}`}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M376 153H378C379.105 153 380 153.895 380 155V249C380 250.105 379.105 251 378 251H376V153Z"
+        className="fill-[#E5E5E5] dark:fill-[#404040]"
+      />
+      <path
+        d="M376 301H378C379.105 301 380 301.895 380 303V351C380 352.105 379.105 353 378 353H376V301Z"
+        className="fill-[#E5E5E5] dark:fill-[#404040]"
+      />
+      <path
+        d="M0 42C0 18.8041 18.804 0 42 0H336C359.196 0 378 18.804 378 42V788C378 811.196 359.196 830 336 830H42C18.804 830 0 811.196 0 788V42Z"
+        className="fill-[#E5E5E5] dark:fill-[#404040]"
+      />
+      <path
+        d="M2 43C2 22.0132 19.0132 5 40 5H338C358.987 5 376 22.0132 376 43V787C376 807.987 358.987 825 338 825H40C19.0132 825 2 807.987 2 787V43Z"
+        className="fill-white dark:fill-[#262626]"
+      />
+
+      <g clip-path="url(#clip0_514_20855)">
+        <path
+          d="M9.25 48C9.25 29.3604 24.3604 14.25 43 14.25H335C353.64 14.25 368.75 29.3604 368.75 48V780C368.75 798.64 353.64 813.75 335 813.75H43C24.3604 813.75 9.25 798.64 9.25 780V48Z"
+          className="fill-[#E5E5E5] stroke-[#E5E5E5] stroke-[0.5] dark:fill-[#404040] dark:stroke-[#404040]"
+        />
+      </g>
+      <circle
+        cx="189"
+        cy="28"
+        r="9"
+        className="fill-white dark:fill-[#262626]"
+      />
+      <circle
+        cx="189"
+        cy="28"
+        r="4"
+        className="fill-[#E5E5E5] dark:fill-[#404040]"
+      />
+      {src && (
+        <image
+          href={src}
+          width="360"
+          height="800"
+          className="size-full object-cover"
+          preserveAspectRatio="xMidYMid slice"
+          clipPath="url(#clip0_514_20855)"
+        />
+      )}
+      {videoSrc && (
+        <foreignObject
+          width="380"
+          height="820"
+          clipPath="url(#clip0_514_20855)"
+          preserveAspectRatio="xMidYMid slice"
+        >
+          <video
+            className="size-full object-cover"
+            src={videoSrc}
+            autoPlay
+            loop
+            muted
+            playsInline
+          />
+        </foreignObject>
+      )}
+      <defs>
+        <clipPath id="clip0_514_20855">
+          <rect
+            width="360"
+            height="800"
+            rx="33"
+            ry="25"
+            className="fill-white dark:fill-[#262626]"
+            transform="translate(9 14)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/registry/registry-examples.ts b/registry/registry-examples.ts
@@ -7,6 +7,24 @@ export const examples: Registry = [
     registryDependencies: ["magic-card"],
     files: ["example/magic-card-demo.tsx"],
   },
+  {
+    name: "android-demo",
+    type: "registry:example",
+    registryDependencies: ["android"],
+    files: ["example/android-demo.tsx"],
+  },
+  {
+    name: "android-demo-2",
+    type: "registry:example",
+    registryDependencies: ["android"],
+    files: ["example/android-demo-2.tsx"],
+  },
+  {
+    name: "android-demo-3",
+    type: "registry:example",
+    registryDependencies: ["android"],
+    files: ["example/android-demo-3.tsx"],
+  },
   {
     name: "morphing-text-demo",
     type: "registry:example",

diff --git a/registry/registry-ui.ts b/registry/registry-ui.ts
@@ -7,6 +7,11 @@ export const ui: Registry = [
     dependencies: ["framer-motion"],
     files: ["magicui/magic-card.tsx"],
   },
+  {
+    name: "android",
+    type: "registry:ui",
+    files: ["magicui/android.tsx"],
+  },
   {
     name: "morphing-text",
     type: "registry:ui",