{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "macbook",
  "type": "registry:block",
  "title": "Macbook",
  "description": "Macbook",
  "files": [
    {
      "path": "components/usages/macbookusage.tsx",
      "content": "import React from \"react\";\r\n\r\nimport MacbookScroll from \"@/registry/open-source/macbook\";\r\n\r\nexport default function MacbookScrollDemo() {\r\n\treturn (\r\n\t\t<div className=\"overflow-hidden dark:bg-background bg-background w-full\">\r\n\t\t\t<MacbookScroll\r\n\t\t\t\ttitle={\r\n\t\t\t\t\t<span>\r\n\t\t\t\t\t\tThis Macbook is built with Tailwindcss. <br /> No kidding.\r\n\t\t\t\t\t</span>\r\n\t\t\t\t}\r\n\t\t\t\tbadge={\r\n\t\t\t\t\t<a href=\"https://peerlist.io/manuarora\">\r\n\t\t\t\t\t\t<Badge className=\"h-10 w-10 transform -rotate-12\" />\r\n\t\t\t\t\t</a>\r\n\t\t\t\t}\r\n\t\t\t\tsrc={`/itjustworks.jpg`}\r\n\t\t\t\tshowGradient={false}\r\n\t\t\t/>\r\n\t\t</div>\r\n\t);\r\n}\r\n// Peerlist logo\r\nconst Badge = ({ className }: { className?: string }) => {\r\n\treturn (\r\n\t\t<svg\r\n\t\t\twidth=\"24\"\r\n\t\t\theight=\"24\"\r\n\t\t\tviewBox=\"0 0 56 56\"\r\n\t\t\tfill=\"none\"\r\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\tclassName={className}\r\n\t\t>\r\n\t\t\t<path\r\n\t\t\t\td=\"M56 28C56 43.464 43.464 56 28 56C12.536 56 0 43.464 0 28C0 12.536 12.536 0 28 0C43.464 0 56 12.536 56 28Z\"\r\n\t\t\t\tfill=\"#00AA45\"\r\n\t\t\t></path>\r\n\t\t\t<path\r\n\t\t\t\tfill-rule=\"evenodd\"\r\n\t\t\t\tclip-rule=\"evenodd\"\r\n\t\t\t\td=\"M28 54C42.3594 54 54 42.3594 54 28C54 13.6406 42.3594 2 28 2C13.6406 2 2 13.6406 2 28C2 42.3594 13.6406 54 28 54ZM28 56C43.464 56 56 43.464 56 28C56 12.536 43.464 0 28 0C12.536 0 0 12.536 0 28C0 43.464 12.536 56 28 56Z\"\r\n\t\t\t\tfill=\"#219653\"\r\n\t\t\t></path>\r\n\t\t\t<path\r\n\t\t\t\tfill-rule=\"evenodd\"\r\n\t\t\t\tclip-rule=\"evenodd\"\r\n\t\t\t\td=\"M27.0769 12H15V46H24.3846V38.8889H27.0769C34.7305 38.8889 41 32.9048 41 25.4444C41 17.984 34.7305 12 27.0769 12ZM24.3846 29.7778V21.1111H27.0769C29.6194 21.1111 31.6154 23.0864 31.6154 25.4444C31.6154 27.8024 29.6194 29.7778 27.0769 29.7778H24.3846Z\"\r\n\t\t\t\tfill=\"#24292E\"\r\n\t\t\t></path>\r\n\t\t\t<path\r\n\t\t\t\tfill-rule=\"evenodd\"\r\n\t\t\t\tclip-rule=\"evenodd\"\r\n\t\t\t\td=\"M18 11H29.0769C36.2141 11 42 16.5716 42 23.4444C42 30.3173 36.2141 35.8889 29.0769 35.8889H25.3846V43H18V11ZM25.3846 28.7778H29.0769C32.1357 28.7778 34.6154 26.39 34.6154 23.4444C34.6154 20.4989 32.1357 18.1111 29.0769 18.1111H25.3846V28.7778Z\"\r\n\t\t\t\tfill=\"white\"\r\n\t\t\t></path>\r\n\t\t\t<path\r\n\t\t\t\tfill-rule=\"evenodd\"\r\n\t\t\t\tclip-rule=\"evenodd\"\r\n\t\t\t\td=\"M17 10H29.0769C36.7305 10 43 15.984 43 23.4444C43 30.9048 36.7305 36.8889 29.0769 36.8889H26.3846V44H17V10ZM19 12V42H24.3846V34.8889H29.0769C35.6978 34.8889 41 29.7298 41 23.4444C41 17.1591 35.6978 12 29.0769 12H19ZM24.3846 17.1111H29.0769C32.6521 17.1111 35.6154 19.9114 35.6154 23.4444C35.6154 26.9775 32.6521 29.7778 29.0769 29.7778H24.3846V17.1111ZM26.3846 19.1111V27.7778H29.0769C31.6194 27.7778 33.6154 25.8024 33.6154 23.4444C33.6154 21.0864 31.6194 19.1111 29.0769 19.1111H26.3846Z\"\r\n\t\t\t\tfill=\"#24292E\"\r\n\t\t\t></path>\r\n\t\t</svg>\r\n\t);\r\n};\r\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/macbookusage.tsx",
      "content": "import React from \"react\";\r\n\r\nimport MacbookScroll from \"@/registry/open-source/macbook\";\r\n\r\nexport default function MacbookScrollDemo() {\r\n\treturn (\r\n\t\t<div className=\"overflow-hidden dark:bg-background bg-background w-full\">\r\n\t\t\t<MacbookScroll\r\n\t\t\t\ttitle={\r\n\t\t\t\t\t<span>\r\n\t\t\t\t\t\tThis Macbook is built with Tailwindcss. <br /> No kidding.\r\n\t\t\t\t\t</span>\r\n\t\t\t\t}\r\n\t\t\t\tbadge={\r\n\t\t\t\t\t<a href=\"https://peerlist.io/manuarora\">\r\n\t\t\t\t\t\t<Badge className=\"h-10 w-10 transform -rotate-12\" />\r\n\t\t\t\t\t</a>\r\n\t\t\t\t}\r\n\t\t\t\tsrc={`/itjustworks.jpg`}\r\n\t\t\t\tshowGradient={false}\r\n\t\t\t/>\r\n\t\t</div>\r\n\t);\r\n}\r\n// Peerlist logo\r\nconst Badge = ({ className }: { className?: string }) => {\r\n\treturn (\r\n\t\t<svg\r\n\t\t\twidth=\"24\"\r\n\t\t\theight=\"24\"\r\n\t\t\tviewBox=\"0 0 56 56\"\r\n\t\t\tfill=\"none\"\r\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\tclassName={className}\r\n\t\t>\r\n\t\t\t<path\r\n\t\t\t\td=\"M56 28C56 43.464 43.464 56 28 56C12.536 56 0 43.464 0 28C0 12.536 12.536 0 28 0C43.464 0 56 12.536 56 28Z\"\r\n\t\t\t\tfill=\"#00AA45\"\r\n\t\t\t></path>\r\n\t\t\t<path\r\n\t\t\t\tfill-rule=\"evenodd\"\r\n\t\t\t\tclip-rule=\"evenodd\"\r\n\t\t\t\td=\"M28 54C42.3594 54 54 42.3594 54 28C54 13.6406 42.3594 2 28 2C13.6406 2 2 13.6406 2 28C2 42.3594 13.6406 54 28 54ZM28 56C43.464 56 56 43.464 56 28C56 12.536 43.464 0 28 0C12.536 0 0 12.536 0 28C0 43.464 12.536 56 28 56Z\"\r\n\t\t\t\tfill=\"#219653\"\r\n\t\t\t></path>\r\n\t\t\t<path\r\n\t\t\t\tfill-rule=\"evenodd\"\r\n\t\t\t\tclip-rule=\"evenodd\"\r\n\t\t\t\td=\"M27.0769 12H15V46H24.3846V38.8889H27.0769C34.7305 38.8889 41 32.9048 41 25.4444C41 17.984 34.7305 12 27.0769 12ZM24.3846 29.7778V21.1111H27.0769C29.6194 21.1111 31.6154 23.0864 31.6154 25.4444C31.6154 27.8024 29.6194 29.7778 27.0769 29.7778H24.3846Z\"\r\n\t\t\t\tfill=\"#24292E\"\r\n\t\t\t></path>\r\n\t\t\t<path\r\n\t\t\t\tfill-rule=\"evenodd\"\r\n\t\t\t\tclip-rule=\"evenodd\"\r\n\t\t\t\td=\"M18 11H29.0769C36.2141 11 42 16.5716 42 23.4444C42 30.3173 36.2141 35.8889 29.0769 35.8889H25.3846V43H18V11ZM25.3846 28.7778H29.0769C32.1357 28.7778 34.6154 26.39 34.6154 23.4444C34.6154 20.4989 32.1357 18.1111 29.0769 18.1111H25.3846V28.7778Z\"\r\n\t\t\t\tfill=\"white\"\r\n\t\t\t></path>\r\n\t\t\t<path\r\n\t\t\t\tfill-rule=\"evenodd\"\r\n\t\t\t\tclip-rule=\"evenodd\"\r\n\t\t\t\td=\"M17 10H29.0769C36.7305 10 43 15.984 43 23.4444C43 30.9048 36.7305 36.8889 29.0769 36.8889H26.3846V44H17V10ZM19 12V42H24.3846V34.8889H29.0769C35.6978 34.8889 41 29.7298 41 23.4444C41 17.1591 35.6978 12 29.0769 12H19ZM24.3846 17.1111H29.0769C32.6521 17.1111 35.6154 19.9114 35.6154 23.4444C35.6154 26.9775 32.6521 29.7778 29.0769 29.7778H24.3846V17.1111ZM26.3846 19.1111V27.7778H29.0769C31.6194 27.7778 33.6154 25.8024 33.6154 23.4444C33.6154 21.0864 31.6194 19.1111 29.0769 19.1111H26.3846Z\"\r\n\t\t\t\tfill=\"#24292E\"\r\n\t\t\t></path>\r\n\t\t</svg>\r\n\t);\r\n};\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/macbook.tsx",
      "content": "\"use client\";\n\nimport React, { ReactNode, useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\nimport { motion, MotionValue, useScroll, useTransform } from \"motion/react\";\n\nimport { AnimatedTooltip } from \"./ToolTip\";\n\n// https://ui.aceternity.com/components/macbook-scroll\n\nconst MacbookScroll = ({\n\tsrc,\n\tshowGradient,\n\ttitle,\n\tbadge,\n\tchildren,\n\tresponse,\n\tcontainerRef,\n}: {\n\tsrc?: string;\n\tshowGradient?: boolean;\n\ttitle?: string | React.ReactNode;\n\tbadge?: React.ReactNode;\n\tchildren?: React.ReactNode;\n}) => {\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst { scrollYProgress } = useScroll({\n\t\ttarget: ref,\n\t\toffset: [\"start center\", \"end end\"],\n\t\t// container: containerRef || null,\n\t});\n\n\tconst [isMobile, setIsMobile] = useState(false);\n\n\tuseEffect(() => {\n\t\tif (window && window.innerWidth < 768) {\n\t\t\tsetIsMobile(true);\n\t\t}\n\t}, []);\n\n\tconst scaleX = useTransform(\n\t\tscrollYProgress,\n\t\t[0, 0.3],\n\t\t[1.2, isMobile ? 1 : 1.5]\n\t);\n\tconst scaleY = useTransform(\n\t\tscrollYProgress,\n\t\t[0, 0.3],\n\t\t[0.6, isMobile ? 1 : 2]\n\t);\n\tconst translate = useTransform(scrollYProgress, [0, 1], [0, 1000]);\n\tconst rotate = useTransform(\n\t\tscrollYProgress,\n\t\t[0.1, 0.12, 0.3],\n\t\t[-28, -28, 0]\n\t);\n\tconst textTransform = useTransform(scrollYProgress, [0, 0.3], [0, 100]);\n\tconst textOpacity = useTransform(scrollYProgress, [0, 0.2], [1, 0]);\n\n\tif (!!containerRef && containerRef.current === undefined) return null;\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName=\"min-h-[200vh] flex flex-col items-center py-0 md:py-80 justify-start shrink-0 perspective-midrange transform md:scale-100  scale-[0.35] sm:scale-50\"\n\t\t>\n\t\t\t<motion.h2\n\t\t\t\tstyle={{\n\t\t\t\t\ttranslateY: textTransform,\n\t\t\t\t\topacity: textOpacity,\n\t\t\t\t}}\n\t\t\t\tclassName=\"dark:text-foreground -mt-[50vh] text-foreground text-3xl font-bold mb-20 text-center\"\n\t\t\t>\n\t\t\t\t{title || (\n\t\t\t\t\t<span>\n\t\t\t\t\t\tThis Macbook is built with Tailwindcss. <br /> No kidding.\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t</motion.h2>\n\t\t\t{/* Lid */}\n\t\t\t<Lid\n\t\t\t\tsrc={src}\n\t\t\t\tscaleX={scaleX}\n\t\t\t\tscaleY={scaleY}\n\t\t\t\trotate={rotate}\n\t\t\t\ttranslate={translate}\n\t\t\t\tresponse={response}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Lid>\n\t\t\t{/* Base area */}\n\t\t\t<div className=\"h-88 w-lg bg-background dark:bg-background rounded-2xl overflow-hidden relative -z-10\">\n\t\t\t\t{/* above keyboard bar */}\n\t\t\t\t<div className=\"h-10 w-full relative\">\n\t\t\t\t\t<div className=\"absolute inset-x-0 mx-auto w-[80%] h-4 bg-background\" />\n\t\t\t\t</div>\n\t\t\t\t<div className=\"flex relative\">\n\t\t\t\t\t<div className=\"mx-auto w-[10%] overflow-hidden  h-full\">\n\t\t\t\t\t\t<SpeakerGrid />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"mx-auto w-[80%] h-full\">\n\t\t\t\t\t\t<Keypad />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"mx-auto w-[10%] overflow-hidden  h-full\">\n\t\t\t\t\t\t<SpeakerGrid />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<Trackpad />\n\t\t\t\t<div className=\"h-2 w-20 mx-auto inset-x-0 absolute bottom-0 bg-linear-to-t from-[#272729] to-[#050505] rounded-tr-3xl rounded-tl-3xl\" />\n\t\t\t\t{showGradient && (\n\t\t\t\t\t<div className=\"h-40 w-full absolute bottom-0 inset-x-0 bg-linear-to-t dark:from-background from-background via-background dark:via-background to-transparent z-40\"></div>\n\t\t\t\t)}\n\t\t\t\t{badge && <div className=\"absolute bottom-4 left-4\">{badge}</div>}\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport const Lid = ({\n\tscaleX,\n\tscaleY,\n\trotate,\n\ttranslate,\n\tsrc,\n\tchildren,\n\tresponse,\n}: {\n\tscaleX: MotionValue<number>;\n\tscaleY: MotionValue<number>;\n\trotate: MotionValue<number>;\n\ttranslate: MotionValue<number>;\n\tsrc?: string;\n\tchildren: React.ReactNode;\n}) => {\n\treturn (\n\t\t<div className=\"relative perspective-midrange\">\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\ttransform: \"perspective(800px) rotateX(-25deg) translateZ(0px)\",\n\t\t\t\t\ttransformOrigin: \"bottom\",\n\t\t\t\t\ttransformStyle: \"preserve-3d\",\n\t\t\t\t}}\n\t\t\t\tclassName=\"h-48 w-lg bg-background rounded-2xl p-2 relative\"\n\t\t\t>\n\t\t\t\t{/* <div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tboxShadow: \"0px 2px 0px 2px var(--neutral-900) inset\",\n\t\t\t\t\t}}\n\t\t\t\t\tclassName=\"absolute inset-0 bg-background rounded-lg flex items-center justify-center z-20 flex-wrap gap-3\"\n\t\t\t\t>\n\t\t\t\t\t<AnimatedTooltip items={response.data.peopleEntries} />\n\t\t\t\t</div> */}\n\t\t\t</div>\n\t\t\t<motion.div\n\t\t\t\tstyle={{\n\t\t\t\t\tscaleX: scaleX,\n\t\t\t\t\tscaleY: scaleY,\n\t\t\t\t\trotateX: rotate,\n\t\t\t\t\ttranslateY: translate,\n\t\t\t\t\ttransformStyle: \"preserve-3d\",\n\t\t\t\t\ttransformOrigin: \"top\",\n\t\t\t\t}}\n\t\t\t\tclassName=\"w-lg absolute inset-0 bg-background rounded-2xl p-2\"\n\t\t\t>\n\t\t\t\t<div className=\"inset-0 bg-background rounded-lg\" />\n\t\t\t\t{/* What moves on scroll */}\n\t\t\t\t{/* <img\n          src={src as string}\n          alt=\"dbs logo\"\n          fill=\"true\"\n          className=\"object-cover object-top-left absolute rounded-lg inset-0 h-full w-full\"\n        /> */}\n\t\t\t\t{children}\n\t\t\t</motion.div>\n\t\t</div>\n\t);\n};\n\nexport const Trackpad = () => {\n\treturn (\n\t\t<div\n\t\t\tclassName=\"w-[40%] mx-auto h-32  rounded-xl my-1\"\n\t\t\tstyle={{\n\t\t\t\tboxShadow: \"0px 0px 1px 1px #00000020 inset\",\n\t\t\t}}\n\t\t></div>\n\t);\n};\n\nexport const Keypad = () => {\n\treturn (\n\t\t<div className=\"h-full rounded-md bg-background mx-1 p-1\">\n\t\t\t{/* First Row */}\n\t\t\t<Row>\n\t\t\t\t<KBtn\n\t\t\t\t\tclassName=\"w-10 items-end justify-start pl-[4px] pb-[2px]\"\n\t\t\t\t\tchildrenClassName=\"items-start\"\n\t\t\t\t>\n\t\t\t\t\tesc\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"inline-block mt-1\">F1</span>\n\t\t\t\t</KBtn>\n\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"inline-block mt-1\">F2</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"inline-block mt-1\">F3</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"inline-block mt-1\">F4</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"inline-block mt-1\">F5</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"inline-block mt-1\">F6</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"inline-block mt-1\">F7</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"inline-block mt-1\">F8</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"inline-block mt-1\">F8</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"inline-block mt-1\">F10</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"inline-block mt-1\">F11</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"inline-block mt-1\">F12</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<div className=\"h-4 w-4 rounded-full  bg-linear-to-b from-20% from-background via-background via-50% to-background to-95% p-px\">\n\t\t\t\t\t\t<div className=\"bg-background h-full w-full rounded-full\" />\n\t\t\t\t\t</div>\n\t\t\t\t</KBtn>\n\t\t\t</Row>\n\n\t\t\t{/* Second row */}\n\t\t\t<Row>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">~</span>\n\t\t\t\t\t<span className=\"block mt-1\">`</span>\n\t\t\t\t</KBtn>\n\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block \">!</span>\n\t\t\t\t\t<span className=\"block\">1</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">@</span>\n\t\t\t\t\t<span className=\"block\">2</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">#</span>\n\t\t\t\t\t<span className=\"block\">3</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">$</span>\n\t\t\t\t\t<span className=\"block\">4</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">%</span>\n\t\t\t\t\t<span className=\"block\">5</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">^</span>\n\t\t\t\t\t<span className=\"block\">6</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">&</span>\n\t\t\t\t\t<span className=\"block\">7</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">*</span>\n\t\t\t\t\t<span className=\"block\">8</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">(</span>\n\t\t\t\t\t<span className=\"block\">9</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">)</span>\n\t\t\t\t\t<span className=\"block\">0</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">&mdash;</span>\n\t\t\t\t\t<span className=\"block\">_</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">+</span>\n\t\t\t\t\t<span className=\"block\"> = </span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn\n\t\t\t\t\tclassName=\"w-10 items-end justify-end pr-[4px] pb-[2px]\"\n\t\t\t\t\tchildrenClassName=\"items-end\"\n\t\t\t\t>\n\t\t\t\t\tdelete\n\t\t\t\t</KBtn>\n\t\t\t</Row>\n\n\t\t\t{/* Third row */}\n\t\t\t<Row>\n\t\t\t\t<KBtn\n\t\t\t\t\tclassName=\"w-10 items-end justify-start pl-[4px] pb-[2px]\"\n\t\t\t\t\tchildrenClassName=\"items-start\"\n\t\t\t\t>\n\t\t\t\t\ttab\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">Q</span>\n\t\t\t\t</KBtn>\n\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">W</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">E</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">R</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">T</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">Y</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">U</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">I</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">O</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">P</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">{`{`}</span>\n\t\t\t\t\t<span className=\"block\">{`[`}</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">{`}`}</span>\n\t\t\t\t\t<span className=\"block\">{`]`}</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">{`|`}</span>\n\t\t\t\t\t<span className=\"block\">{`\\\\`}</span>\n\t\t\t\t</KBtn>\n\t\t\t</Row>\n\n\t\t\t{/* Fourth Row */}\n\t\t\t<Row>\n\t\t\t\t<KBtn\n\t\t\t\t\tclassName=\"w-[2.8rem] items-end justify-start pl-[4px] pb-[2px]\"\n\t\t\t\t\tchildrenClassName=\"items-start\"\n\t\t\t\t>\n\t\t\t\t\tcaps lock\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">A</span>\n\t\t\t\t</KBtn>\n\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">S</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">D</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">F</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">G</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">H</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">J</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">K</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">L</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">{`:`}</span>\n\t\t\t\t\t<span className=\"block\">{`;`}</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">{`\"`}</span>\n\t\t\t\t\t<span className=\"block\">{`'`}</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn\n\t\t\t\t\tclassName=\"w-[2.85rem] items-end justify-end pr-[4px] pb-[2px]\"\n\t\t\t\t\tchildrenClassName=\"items-end\"\n\t\t\t\t>\n\t\t\t\t\treturn\n\t\t\t\t</KBtn>\n\t\t\t</Row>\n\n\t\t\t{/* Fifth Row */}\n\t\t\t<Row>\n\t\t\t\t<KBtn\n\t\t\t\t\tclassName=\"w-[3.65rem] items-end justify-start pl-[4px] pb-[2px]\"\n\t\t\t\t\tchildrenClassName=\"items-start\"\n\t\t\t\t>\n\t\t\t\t\tshift\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">Z</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">X</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">C</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">V</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">B</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">N</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">M</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">{`<`}</span>\n\t\t\t\t\t<span className=\"block\">{`,`}</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">{`>`}</span>\n\t\t\t\t\t<span className=\"block\">{`.`}</span>\n\t\t\t\t</KBtn>{\" \"}\n\t\t\t\t<KBtn>\n\t\t\t\t\t<span className=\"block\">{`?`}</span>\n\t\t\t\t\t<span className=\"block\">{`/`}</span>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn\n\t\t\t\t\tclassName=\"w-[3.65rem] items-end justify-end pr-[4px] pb-[2px]\"\n\t\t\t\t\tchildrenClassName=\"items-end\"\n\t\t\t\t>\n\t\t\t\t\tshift\n\t\t\t\t</KBtn>\n\t\t\t</Row>\n\n\t\t\t{/* sixth Row */}\n\t\t\t<Row>\n\t\t\t\t<KBtn\n\t\t\t\t\tclassName=\"\"\n\t\t\t\t\tchildrenClassName=\"h-full justify-between py-[4px]\"\n\t\t\t\t>\n\t\t\t\t\t<div className=\"flex justify-end w-full pr-1\">\n\t\t\t\t\t\t<span className=\"block\">fn</span>\n\t\t\t\t\t</div>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn\n\t\t\t\t\tclassName=\"\"\n\t\t\t\t\tchildrenClassName=\"h-full justify-between py-[4px]\"\n\t\t\t\t>\n\t\t\t\t\t<div className=\"flex justify-start w-full pl-1\">\n\t\t\t\t\t\t<span className=\"block\">control</span>\n\t\t\t\t\t</div>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn\n\t\t\t\t\tclassName=\"\"\n\t\t\t\t\tchildrenClassName=\"h-full justify-between py-[4px]\"\n\t\t\t\t>\n\t\t\t\t\t<div className=\"flex justify-end w-full pr-1\">\n\t\t\t\t\t\t<OptionKey className=\"h-[6px] w-[6px]\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"flex justify-start w-full pl-1\">\n\t\t\t\t\t\t<span className=\"block\">option</span>\n\t\t\t\t\t</div>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn\n\t\t\t\t\tclassName=\"w-8\"\n\t\t\t\t\tchildrenClassName=\"h-full justify-between py-[4px]\"\n\t\t\t\t>\n\t\t\t\t\t<div className=\"flex justify-start w-full pl-1\">\n\t\t\t\t\t\t<span className=\"block\">command</span>\n\t\t\t\t\t</div>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn className=\"w-[8.2rem]\"></KBtn>\n\t\t\t\t<KBtn\n\t\t\t\t\tclassName=\"w-8\"\n\t\t\t\t\tchildrenClassName=\"h-full justify-between py-[4px]\"\n\t\t\t\t>\n\t\t\t\t\t<div className=\"flex justify-start w-full pl-1\">\n\t\t\t\t\t\t<span className=\"block\">command</span>\n\t\t\t\t\t</div>\n\t\t\t\t</KBtn>\n\t\t\t\t<KBtn\n\t\t\t\t\tclassName=\"\"\n\t\t\t\t\tchildrenClassName=\"h-full justify-between py-[4px]\"\n\t\t\t\t>\n\t\t\t\t\t<div className=\"flex justify-start w-full pl-1\">\n\t\t\t\t\t\t<OptionKey className=\"h-[6px] w-[6px]\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"flex justify-start w-full pl-1\">\n\t\t\t\t\t\t<span className=\"block\">option</span>\n\t\t\t\t\t</div>\n\t\t\t\t</KBtn>\n\t\t\t</Row>\n\t\t</div>\n\t);\n};\nexport const KBtn = ({\n\tclassName,\n\tchildren,\n\tchildrenClassName,\n\tbacklit = true,\n}: {\n\tclassName?: string;\n\tchildren?: React.ReactNode;\n\tchildrenClassName?: string;\n\tbacklit?: boolean;\n}) => {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"p-[0.5px] rounded-[4px]\",\n\t\t\t\tbacklit && \"bg-background/20 shadow-xl shadow-white\"\n\t\t\t)}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"h-6 w-6 bg-background rounded-[3.5px] flex items-center justify-center\",\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t\tstyle={{\n\t\t\t\t\tboxShadow:\n\t\t\t\t\t\t\"0px -0.5px 2px 0 #0D0D0F inset, -0.5px 0px 2px 0 #0D0D0F inset\",\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"text-foreground text-[5px] w-full flex justify-center items-center flex-col\",\n\t\t\t\t\t\tchildrenClassName,\n\t\t\t\t\t\tbacklit && \"text-foreground\"\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport const Row = ({ children }: { children: React.ReactNode }) => {\n\treturn (\n\t\t<div className=\"flex gap-[2px] mb-[2px] w-full shrink-0\">\n\t\t\t{children}\n\t\t</div>\n\t);\n};\n\nexport const SpeakerGrid = () => {\n\treturn (\n\t\t<div\n\t\t\tclassName=\"flex px-[0.5px] gap-[2px] mt-2 h-40\"\n\t\t\tstyle={{\n\t\t\t\tbackgroundImage:\n\t\t\t\t\t\"radial-gradient(circle, #08080A 0.5px, transparent 0.5px)\",\n\t\t\t\tbackgroundSize: \"3px 3px\",\n\t\t\t}}\n\t\t></div>\n\t);\n};\n\nexport const OptionKey = ({ className }: { className: string }) => {\n\treturn (\n\t\t<svg\n\t\t\tfill=\"none\"\n\t\t\tversion=\"1.1\"\n\t\t\tid=\"icon\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\tviewBox=\"0 0 32 32\"\n\t\t\tclassName={className}\n\t\t>\n\t\t\t<rect\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\tstrokeWidth={2}\n\t\t\t\tx=\"18\"\n\t\t\t\ty=\"5\"\n\t\t\t\twidth=\"10\"\n\t\t\t\theight=\"2\"\n\t\t\t/>\n\t\t\t<polygon\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\tstrokeWidth={2}\n\t\t\t\tpoints=\"10.6,5 4,5 4,7 9.4,7 18.4,27 28,27 28,25 19.6,25 \"\n\t\t\t/>\n\t\t\t<rect\n\t\t\t\tid=\"_Transparent_Rectangle_\"\n\t\t\t\tclassName=\"st0\"\n\t\t\t\twidth=\"32\"\n\t\t\t\theight=\"32\"\n\t\t\t\tstroke=\"none\"\n\t\t\t/>\n\t\t</svg>\n\t);\n};\n\nexport default MacbookScroll;\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}