@gentleduck/docs 0.0.1

package/src/components/icons.tsx

@@ -0,0 +1,194 @@
+import { FileIcon } from 'lucide-react'
+
+type IconProps = React.HTMLAttributes<SVGElement>
+
+export const Icons = {
+  apple: (props: IconProps) => (
+    <svg role="img" viewBox="0 0 24 24" {...props}>
+      <path
+        d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  aria: (props: IconProps) => (
+    <svg fill="currentColor" role="img" viewBox="0 0 24 24" {...props}>
+      <path d="M13.966 22.624l-1.69-4.281H8.122l3.892-9.144 5.662 13.425zM8.884 1.376H0v21.248zm15.116 0h-8.884L24 22.624Z" />
+    </svg>
+  ),
+  bash: (props: IconProps) => (
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M21.038 4.9 13.461.402a2.86 2.86 0 0 0-2.923.001L2.961 4.9A3.023 3.023 0 0 0 1.5 7.503v8.995c0 1.073.557 2.066 1.462 2.603l7.577 4.497a2.86 2.86 0 0 0 2.922 0l7.577-4.497a3.023 3.023 0 0 0 1.462-2.603V7.503A3.021 3.021 0 0 0 21.038 4.9zM15.17 18.946l.013.646c.001.078-.05.167-.111.198l-.383.22c-.061.031-.111-.007-.112-.085l-.007-.635c-.328.136-.66.169-.872.084-.04-.016-.057-.075-.041-.142l.139-.584a.24.24 0 0 1 .069-.121.163.163 0 0 1 .036-.026c.022-.011.043-.014.062-.006.229.077.521.041.802-.101.357-.181.596-.545.592-.907-.003-.328-.181-.465-.613-.468-.55.001-1.064-.107-1.072-.917-.007-.667.34-1.361.889-1.8l-.007-.652c-.001-.08.048-.168.111-.2l.37-.236c.061-.031.111.007.112.087l.006.653c.273-.109.511-.138.726-.088.047.012.067.076.048.151l-.144.578a.255.255 0 0 1-.065.116.161.161 0 0 1-.038.028.083.083 0 0 1-.057.009c-.098-.022-.332-.073-.699.113-.385.195-.52.53-.517.778.003.297.155.387.681.396.7.012 1.003.318 1.01 1.023.007.689-.362 1.433-.928 1.888zm3.973-1.087c0 .06-.008.116-.058.145l-1.916 1.164c-.05.029-.09.004-.09-.056v-.494c0-.06.037-.093.087-.122l1.887-1.129c.05-.029.09-.004.09.056v.436zm1.316-11.062-7.168 4.427c-.894.523-1.553 1.109-1.553 2.187v8.833c0 .645.26 1.063.66 1.184a2.304 2.304 0 0 1-.398.039c-.42 0-.833-.114-1.197-.33L3.226 18.64a2.494 2.494 0 0 1-1.201-2.142V7.503c0-.881.46-1.702 1.201-2.142L10.803.863a2.342 2.342 0 0 1 2.394 0l7.577 4.498a2.479 2.479 0 0 1 1.164 1.732c-.252-.536-.818-.682-1.479-.296z" />
+    </svg>
+  ),
+  css: (props: IconProps) => (
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M0 0v20.16A3.84 3.84 0 0 0 3.84 24h16.32A3.84 3.84 0 0 0 24 20.16V3.84A3.84 3.84 0 0 0 20.16 0Zm14.256 13.08c1.56 0 2.28 1.08 2.304 2.64h-1.608c.024-.288-.048-.6-.144-.84-.096-.192-.288-.264-.552-.264-.456 0-.696.264-.696.84-.024.576.288.888.768 1.08.72.288 1.608.744 1.92 1.296q.432.648.432 1.656c0 1.608-.912 2.592-2.496 2.592-1.656 0-2.4-1.032-2.424-2.688h1.68c0 .792.264 1.176.792 1.176.264 0 .456-.072.552-.24.192-.312.24-1.176-.048-1.512-.312-.408-.912-.6-1.32-.816q-.828-.396-1.224-.936c-.24-.36-.36-.888-.36-1.536 0-1.44.936-2.472 2.424-2.448m5.4 0c1.584 0 2.304 1.08 2.328 2.64h-1.608c0-.288-.048-.6-.168-.84-.096-.192-.264-.264-.528-.264-.48 0-.72.264-.72.84s.288.888.792 1.08c.696.288 1.608.744 1.92 1.296.264.432.408.984.408 1.656.024 1.608-.888 2.592-2.472 2.592-1.68 0-2.424-1.056-2.448-2.688h1.68c0 .744.264 1.176.792 1.176.264 0 .456-.072.552-.24.216-.312.264-1.176-.048-1.512-.288-.408-.888-.6-1.32-.816-.552-.264-.96-.576-1.2-.936s-.36-.888-.36-1.536c-.024-1.44.912-2.472 2.4-2.448m-11.031.018c.711-.006 1.419.198 1.839.63.432.432.672 1.128.648 1.992H9.336c.024-.456-.096-.792-.432-.96-.312-.144-.768-.048-.888.24-.12.264-.192.576-.168.864v3.504c0 .744.264 1.128.768 1.128a.65.65 0 0 0 .552-.264c.168-.24.192-.552.168-.84h1.776c.096 1.632-.984 2.712-2.568 2.688-1.536 0-2.496-.864-2.472-2.472v-4.032c0-.816.24-1.44.696-1.848.432-.408 1.146-.624 1.857-.63" />
+    </svg>
+  ),
+  gitHub: (props: IconProps) => (
+    <svg viewBox="0 0 438.549 438.549" {...props}>
+      <path
+        d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
+        fill="currentColor"></path>
+    </svg>
+  ),
+  google: (props: IconProps) => (
+    <svg role="img" viewBox="0 0 24 24" {...props}>
+      <path
+        d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  json: (props: IconProps) => (
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M12.043 23.968c.479-.004.953-.029 1.426-.094a11.805 11.805 0 0 0 3.146-.863 12.404 12.404 0 0 0 3.793-2.542 11.977 11.977 0 0 0 2.44-3.427 11.794 11.794 0 0 0 1.02-3.476c.149-1.16.135-2.346-.045-3.499a11.96 11.96 0 0 0-.793-2.788 11.197 11.197 0 0 0-.854-1.617c-1.168-1.837-2.861-3.314-4.81-4.3a12.835 12.835 0 0 0-2.172-.87h-.005c.119.063.24.132.345.201.12.074.239.146.351.225a8.93 8.93 0 0 1 1.559 1.33c1.063 1.145 1.797 2.548 2.218 4.041.284.982.434 1.998.495 3.017.044.743.044 1.491-.047 2.229-.149 1.27-.554 2.51-1.228 3.596a7.475 7.475 0 0 1-1.903 2.084c-1.244.928-2.877 1.482-4.436 1.114a3.916 3.916 0 0 1-.748-.258 4.692 4.692 0 0 1-.779-.45 6.08 6.08 0 0 1-1.244-1.105 6.507 6.507 0 0 1-1.049-1.747 7.366 7.366 0 0 1-.494-2.54c-.03-1.273.225-2.553.854-3.67a6.43 6.43 0 0 1 1.663-1.918c.225-.178.464-.333.704-.479l.016-.007a5.121 5.121 0 0 0-1.441-.12 4.963 4.963 0 0 0-1.228.24c-.359.12-.704.27-1.019.45a6.146 6.146 0 0 0-.733.494c-.211.18-.42.36-.615.555-1.123 1.153-1.768 2.682-2.022 4.256-.15.973-.15 1.96-.091 2.95.105 1.395.391 2.787.945 4.062a8.518 8.518 0 0 0 1.348 2.173 8.14 8.14 0 0 0 3.132 2.23 7.934 7.934 0 0 0 2.113.54c.074.015.149.015.209.015zm-2.934-.398a4.102 4.102 0 0 1-.45-.228 8.5 8.5 0 0 1-2.038-1.534c-1.094-1.137-1.827-2.566-2.247-4.08a15.184 15.184 0 0 1-.495-3.172 12.14 12.14 0 0 1 .046-2.082c.135-1.257.495-2.501 1.124-3.58a6.889 6.889 0 0 1 1.783-2.053 6.23 6.23 0 0 1 1.633-.9 5.363 5.363 0 0 1 3.522-.045c.029 0 .029 0 .045.03.015.015.045.015.06.03.045.016.104.045.165.074.239.12.479.271.704.42a6.294 6.294 0 0 1 2.097 2.502c.42.914.615 1.934.631 2.938.014 1.079-.18 2.157-.645 3.146a6.42 6.42 0 0 1-2.638 2.832c.09.03.18.045.271.075.225.044.449.074.688.074 1.468.045 2.892-.66 3.94-1.647.195-.18.375-.375.54-.585.225-.27.435-.54.614-.823.239-.375.435-.75.614-1.154a8.112 8.112 0 0 0 .509-1.664c.196-1.004.211-2.022.149-3.026-.135-2.022-.673-4.045-1.842-5.724a9.054 9.054 0 0 0-.555-.719 9.868 9.868 0 0 0-1.063-1.034 8.477 8.477 0 0 0-1.363-.915 9.927 9.927 0 0 0-1.692-.598l-.3-.06c-.209-.03-.42-.044-.634-.06a8.453 8.453 0 0 0-1.015.016c-.704.045-1.412.16-2.112.337C5.799 1.227 2.863 3.566 1.3 6.67A11.834 11.834 0 0 0 .238 9.801a11.81 11.81 0 0 0-.104 3.775c.12 1.02.374 2.023.778 2.977.227.57.511 1.124.825 1.648 1.094 1.783 2.683 3.236 4.51 4.24.688.39 1.408.69 2.157.944.226.074.45.15.689.21z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  logo: (props: IconProps) => (
+    <svg fill="none" height="450" viewBox="0 0 448 450" width="448" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M411.865 36.1073C440.389 64.7279 449.871 103.943 447.02 140.62C444.182 177.135 429.014 213.134 405.494 236.734L236.209 406.588C236.207 406.588 236.098 406.48 225.88 396.227L236.208 406.59L231.161 411.653L224.078 410.77L77.3506 392.475L25.0592 444.943C19.3552 450.666 10.1073 450.666 4.40329 444.943C-1.30081 439.219 -1.30081 429.94 4.40329 424.217L56.6919 371.752L38.4584 224.525L37.5786 217.419L42.625 212.355L52.9534 222.718C42.7142 212.444 42.6262 212.355 42.6264 212.354L153.142 101.466C153.183 101.425 153.224 101.383 153.266 101.341L211.912 42.4995C234.792 19.5418 270.681 4.37407 307.123 1.35131C343.734 -1.68543 383.246 7.39278 411.865 36.1073ZM169.547 299.968L103.534 366.204L220.599 380.8L300.178 300.951L169.547 299.968ZM68.3288 228.017L82.8749 345.48L148.927 279.206L148.927 147.147L68.3288 228.017ZM236.436 232.853L198.543 270.874L329.173 271.858L367.067 233.838L236.436 232.853ZM391.208 56.833C370.283 35.8381 340.17 28.0215 309.53 30.563C278.72 33.1186 249.733 46.002 232.567 63.2245L178.14 117.835V249.894L302.055 125.562C307.759 119.839 317.008 119.839 322.712 125.562C328.416 131.286 328.415 140.565 322.712 146.288L265.431 203.761L394.375 204.732C407.178 187.032 415.965 163.189 417.896 138.342C420.264 107.883 412.226 77.9219 391.208 56.833Z"
+        fill="white"
+      />
+    </svg>
+  ),
+  npm: (props: IconProps) => (
+    <svg viewBox="0 0 24 24" {...props}>
+      <path
+        d="M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  paypal: (props: IconProps) => (
+    <svg role="img" viewBox="0 0 24 24" {...props}>
+      <path
+        d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 0 0-.607-.541c-.013.076-.026.175-.041.254-.93 4.778-4.005 7.201-9.138 7.201h-2.19a.563.563 0 0 0-.556.479l-1.187 7.527h-.506l-.24 1.516a.56.56 0 0 0 .554.647h3.882c.46 0 .85-.334.922-.788.06-.26.76-4.852.816-5.09a.932.932 0 0 1 .923-.788h.58c3.76 0 6.705-1.528 7.565-5.946.36-1.847.174-3.388-.777-4.471z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  pnpm: (props: IconProps) => (
+    <svg viewBox="0 0 24 24" {...props}>
+      <path
+        d="M0 0v7.5h7.5V0zm8.25 0v7.5h7.498V0zm8.25 0v7.5H24V0zM8.25 8.25v7.5h7.498v-7.5zm8.25 0v7.5H24v-7.5zM0 16.5V24h7.5v-7.5zm8.25 0V24h7.498v-7.5zm8.25 0V24H24v-7.5z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  radix: (props: IconProps) => (
+    <svg fill="none" viewBox="0 0 25 25" {...props}>
+      <path d="M12 25C7.58173 25 4 21.4183 4 17C4 12.5817 7.58173 9 12 9V25Z" fill="currentcolor"></path>
+      <path d="M12 0H4V8H12V0Z" fill="currentcolor"></path>
+      <path
+        d="M17 8C19.2091 8 21 6.20914 21 4C21 1.79086 19.2091 0 17 0C14.7909 0 13 1.79086 13 4C13 6.20914 14.7909 8 17 8Z"
+        fill="currentcolor"></path>
+    </svg>
+  ),
+  react: (props: IconProps) => (
+    <svg viewBox="0 0 24 24" {...props}>
+      <path
+        d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  spinner: (props: IconProps) => (
+    <svg
+      fill="none"
+      height="24"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}>
+      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+    </svg>
+  ),
+  tailwind: (props: IconProps) => (
+    <svg viewBox="0 0 24 24" {...props}>
+      <path
+        d="M12.001,4.8c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 C13.666,10.618,15.027,12,18.001,12c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C16.337,6.182,14.976,4.8,12.001,4.8z M6.001,12c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 c1.177,1.194,2.538,2.576,5.512,2.576c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C10.337,13.382,8.976,12,6.001,12z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+
+  toml: (props: IconProps) => (
+    <svg
+      data-darkreader-inline-fill=""
+      data-darkreader-inline-stroke=""
+      fill="currentColor"
+      height="200px"
+      role="img"
+      stroke="currentColor"
+      stroke-width="0"
+      style={
+        {
+          '--darkreader-inline-fill': 'currentColor',
+          '--darkreader-inline-stroke': 'currentColor',
+        } as React.CSSProperties
+      }
+      viewBox="0 0 24 24"
+      width="200px"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}>
+      <path d="M.014 0h5.34v2.652H2.888v18.681h2.468V24H.015V0Zm17.622 5.049v2.78h-4.274v12.935h-3.008V7.83H6.059V5.05h11.577ZM23.986 24h-5.34v-2.652h2.467V2.667h-2.468V0h5.34v24Z"></path>
+    </svg>
+  ),
+  ts: (props: IconProps) => (
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z" />
+    </svg>
+  ),
+  twitter: (props: IconProps) => (
+    <svg {...props} height="23" viewBox="0 0 1200 1227" width="23" xmlns="http://www.w3.org/2000/svg">
+      <path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" />
+    </svg>
+  ),
+  v0: (props: IconProps) => (
+    <svg fill="none" viewBox="0 0 40 20" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M23.3919 0H32.9188C36.7819 0 39.9136 3.13165 39.9136 6.99475V16.0805H36.0006V6.99475C36.0006 6.90167 35.9969 6.80925 35.9898 6.71766L26.4628 16.079C26.4949 16.08 26.5272 16.0805 26.5595 16.0805H36.0006V19.7762H26.5595C22.6964 19.7762 19.4788 16.6139 19.4788 12.7508V3.68923H23.3919V12.7508C23.3919 12.9253 23.4054 13.0977 23.4316 13.2668L33.1682 3.6995C33.0861 3.6927 33.003 3.68923 32.9188 3.68923H23.3919V0Z"
+        fill="currentColor"></path>
+      <path
+        d="M13.7688 19.0956L0 3.68759H5.53933L13.6231 12.7337V3.68759H17.7535V17.5746C17.7535 19.6705 15.1654 20.6584 13.7688 19.0956Z"
+        fill="currentColor"></path>
+    </svg>
+  ),
+  yarn: (props: IconProps) => (
+    <svg viewBox="0 0 24 24" {...props}>
+      <path
+        d="M12 0C5.375 0 0 5.375 0 12s5.375 12 12 12 12-5.375 12-12S18.625 0 12 0zm.768 4.105c.183 0 .363.053.525.157.125.083.287.185.755 1.154.31-.088.468-.042.551-.019.204.056.366.19.463.375.477.917.542 2.553.334 3.605-.241 1.232-.755 2.029-1.131 2.576.324.329.778.899 1.117 1.825.278.774.31 1.478.273 2.015a5.51 5.51 0 0 0 .602-.329c.593-.366 1.487-.917 2.553-.931.714-.009 1.269.445 1.353 1.103a1.23 1.23 0 0 1-.945 1.362c-.649.158-.95.278-1.821.843-1.232.797-2.539 1.242-3.012 1.39a1.686 1.686 0 0 1-.704.343c-.737.181-3.266.315-3.466.315h-.046c-.783 0-1.214-.241-1.45-.491-.658.329-1.51.19-2.122-.134a1.078 1.078 0 0 1-.58-1.153 1.243 1.243 0 0 1-.153-.195c-.162-.25-.528-.936-.454-1.946.056-.723.556-1.367.88-1.71a5.522 5.522 0 0 1 .408-2.256c.306-.727.885-1.348 1.32-1.737-.32-.537-.644-1.367-.329-2.21.227-.602.412-.936.82-1.08h-.005c.199-.074.389-.153.486-.259a3.418 3.418 0 0 1 2.298-1.103c.037-.093.079-.185.125-.283.31-.658.639-1.029 1.024-1.168a.94.94 0 0 1 .328-.06zm.006.7c-.507.016-1.001 1.519-1.001 1.519s-1.27-.204-2.266.871c-.199.218-.468.334-.746.44-.079.028-.176.023-.417.672-.371.991.625 2.094.625 2.094s-1.186.839-1.626 1.881c-.486 1.144-.338 2.261-.338 2.261s-.843.732-.899 1.487c-.051.663.139 1.2.343 1.515.227.343.51.176.51.176s-.561.653-.037.931c.477.25 1.283.394 1.71-.037.31-.31.371-1.001.486-1.283.028-.065.12.111.209.199.097.093.264.195.264.195s-.755.324-.445 1.066c.102.246.468.403 1.066.398.222-.005 2.664-.139 3.313-.296.375-.088.505-.283.505-.283s1.566-.431 2.998-1.357c.917-.598 1.293-.76 2.034-.936.612-.148.57-1.098-.241-1.084-.839.009-1.575.44-2.196.825-1.163.718-1.742.672-1.742.672l-.018-.032c-.079-.13.371-1.293-.134-2.678-.547-1.515-1.413-1.881-1.344-1.997.297-.5 1.038-1.297 1.334-2.78.176-.899.13-2.377-.269-3.151-.074-.144-.732.241-.732.241s-.616-1.371-.788-1.483a.271.271 0 0 0-.157-.046z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+}
+
+export function getIconForLanguageExtension(language: string) {
+  switch (language) {
+    case 'json':
+      return <Icons.json />
+    case 'css':
+      return <Icons.css className="fill-foreground" />
+    case 'js':
+    case 'jsx':
+    case 'ts':
+    case 'tsx':
+    case 'typescript':
+      return <Icons.ts className="fill-foreground" />
+    case 'toml':
+      return <Icons.toml className="fill-foreground" />
+    default:
+      return <FileIcon />
+  }
+}

package/src/components/index.ts

@@ -0,0 +1,13 @@
+'use client'
+export * from './copy-button'
+export * from './docs'
+export * from './icons'
+export * from './layouts'
+export * from './main-nav'
+export * from './mdx/mdx'
+export * from './mdx/mdx-components'
+export * from './mobile-nav'
+export * from './mode-toggle'
+export * from './page-header'
+export * from './providers'
+export * from './themes'

package/src/components/layouts/command-menu/command-menu.tsx

@@ -0,0 +1,166 @@
+'use client'
+
+import { useDocsConfig } from '@duck-docs/context'
+import { cn } from '@gentleduck/libs/cn'
+import { Button } from '@gentleduck/registry-ui-duckui/button'
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+  useCommandRefsContext,
+} from '@gentleduck/registry-ui-duckui/command'
+import { Separator } from '@gentleduck/registry-ui-duckui/separator'
+import { useKeyCommands } from '@gentleduck/vim/react'
+import { Circle, Command, CornerDownLeft, FileIcon, Moon, Sun } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+import { useTheme } from 'next-themes'
+import * as React from 'react'
+
+export function CommandMenu() {
+  const router = useRouter()
+  const [open, setOpen] = React.useState(false)
+  const { setTheme } = useTheme()
+  const docsConfig = useDocsConfig()
+
+  const groupRef = React.useRef<HTMLUListElement>(null)
+  const items = [
+    ...docsConfig.sidebarNav.map((group) => ({
+      items: group.items?.map((navItem) => ({
+        action: () => router.push(navItem.href as string),
+        icon: <Circle className="mr-2 h-3 w-3" />,
+        name: navItem.title,
+      })),
+      title: group.title,
+    })),
+    {
+      items: [
+        {
+          action: () => setTheme('light'),
+          icon: <Sun className="mr-2 h-4 w-4" />,
+          name: 'Light',
+        },
+        {
+          action: () => setTheme('dark'),
+          icon: <Moon className="mr-2 h-4 w-4" />,
+          name: 'Dark',
+        },
+        {
+          action: () => setTheme('system'),
+          icon: <FileIcon className="mr-2 h-4 w-4" />,
+          name: 'System',
+        },
+      ],
+      title: 'Theme',
+    },
+  ]
+
+  return (
+    <>
+      <Button
+        className={cn(
+          'relative h-8 w-full bg-muted/50 text-muted-foreground text-sm shadow-none md:w-40 lg:w-64 ltr:pr-2 rtl:pl-2 [&>div]:w-full [&>div]:justify-between',
+        )}
+        onClick={() => setOpen(true)}
+        size={'sm'}
+        variant="outline">
+        <span className="hidden lg:inline-flex">Search documentation...</span>
+        <span className="inline-flex lg:hidden">Search...</span>
+        <CommandShortcut
+          className="bg-secondary"
+          keys={'ctrl+k'}
+          onKeysPressed={() => {
+            setOpen(!open)
+            window.event?.preventDefault()
+          }}>
+          <Command className="!size-3" />
+          <span className="text-md">K</span>
+        </CommandShortcut>
+      </Button>
+      <CommandDialog onOpenChange={setOpen} open={open}>
+        <CommandInput autoFocus placeholder="Search..." />
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandList className="h-[550px] max-h-full w-90 md:w-full">
+          {items.map((group, idx) => (
+            <React.Fragment key={group.title}>
+              <CommandGroup heading={group.title}>
+                {group.items?.map((item) => (
+                  <CommandItem
+                    id={item.name}
+                    key={item.name}
+                    onClick={() => {
+                      setOpen(false)
+                      item.action()
+                      groupRef.current?.scrollTo(0, 0)
+                      groupRef.current?.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'start',
+                        inline: 'start',
+                      })
+                    }}>
+                    {item.icon}
+                    <span>{item.name}</span>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+              {idx !== items.length - 1 && <CommandSeparator />}
+            </React.Fragment>
+          ))}
+        </CommandList>
+        <CommandFooter />
+      </CommandDialog>
+    </>
+  )
+}
+
+function CommandFooter() {
+  const { selectedItem } = useCommandRefsContext()
+  const docsConfig = useDocsConfig()
+  const sidebarItems = docsConfig.sidebarNav.flatMap((group) => group.items ?? [])
+  const selectedNavItem = sidebarItems.find((item) => item.title === selectedItem?.innerText)
+  useKeyCommands({
+    'ctrl+shift+c': {
+      description: 'Copy command',
+      execute: () =>
+        navigator.clipboard.writeText(
+          ('pnpm dlx @gentleduck/cli add ' + selectedItem?.innerText.toLowerCase().replace(/ /g, '-')) as string,
+        ),
+      name: 'ctrl+shift+c',
+    },
+  })
+  return (
+    <div className="hidden w-full items-center justify-between gap-4 border-t px-2 pt-2 lg:flex">
+      <div className="flex w-full items-center justify-between gap-4">
+        {selectedItem?.innerText && (
+          <Button className={cn('px-2')} size={'sm'} variant={'outline'}>
+            <CornerDownLeft />
+            <Separator className="m-0 h-4 p-0" orientation="vertical" />
+            {selectedItem?.innerText}
+          </Button>
+        )}
+        {selectedItem?.innerText && selectedNavItem?.title ? (
+          <Button className={cn('px-2')} size={'sm'} variant={'outline'}>
+            <div className="flex items-center gap-1">
+              <Command className="!size-3" />
+              <p className="text-md">C</p>
+            </div>
+            <Separator className="m-0 h-4 p-0" orientation="vertical" />
+            <div className="flex items-center gap-1">
+              <span>pnpm dlx @gentleduck/cli add</span>
+              <span className="text-blue-400">{selectedNavItem.title.toLowerCase()}</span>
+            </div>
+          </Button>
+        ) : (
+          <p className="my-auto h-fit w-full whitespace-nowrap text-right text-muted-foreground text-sm">
+            <span className="whitespace-nowrap font-medium text-sm">Command palette</span> for the documentation
+            content.
+          </p>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/layouts/command-menu/index.ts

@@ -0,0 +1 @@
+export * from './command-menu'

package/src/components/layouts/index.ts

@@ -0,0 +1,4 @@
+export * from './command-menu'
+export * from './site-footer'
+export * from './site-header'
+export * from './tailwind-indicator'

package/src/components/layouts/site-footer/index.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+import { useSiteConfig } from '@duck-docs/context'
+import { buttonVariants } from '@gentleduck/registry-ui-duckui/button'
+import { HeartIcon, Mail } from 'lucide-react'
+import Link from 'next/link'
+
+export function SiteFooter() {
+  const siteConfig = useSiteConfig()
+  const authorName = siteConfig.author?.name ?? siteConfig.name
+  const authorUrl = siteConfig.author?.url ?? siteConfig.links?.twitter
+  const githubUrl = siteConfig.links?.github
+
+  return (
+    <footer className="w-full border-t py-6 md:px-8 md:py-0">
+      <div className="container mx-auto flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
+        <div className="flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
+          <p className="text-balance text-center text-muted-foreground text-sm leading-loose md:text-left">
+            Built by{' '}
+            {authorUrl ? (
+              <a className="font-medium underline underline-offset-4" href={authorUrl} rel="noreferrer" target="_blank">
+                {authorName}
+              </a>
+            ) : (
+              <span className="font-medium">{authorName}</span>
+            )}
+            {githubUrl ? (
+              <>
+                . The source code is available on{' '}
+                <a
+                  className="font-medium underline underline-offset-4"
+                  href={githubUrl}
+                  rel="noreferrer"
+                  target="_blank">
+                  GitHub
+                </a>
+                .
+              </>
+            ) : null}
+          </p>
+        </div>
+        <div className="hidden items-center gap-4 md:flex">
+          <FooterButtons />
+        </div>
+      </div>
+    </footer>
+  )
+}
+
+export function FooterButtons() {
+  const siteConfig = useSiteConfig()
+  return (
+    <>
+      <Link
+        className={buttonVariants({ size: 'sm', variant: 'outline' })}
+        href="https://github.com/sponsors/wildduck2"
+        target="_blank">
+        <HeartIcon className="mr-2 h-4 w-4 fill-current text-red-600" />
+        Sponsor
+      </Link>
+      <Link
+        className={buttonVariants({ size: 'sm', variant: 'outline' })}
+        href={siteConfig.links?.email ? `mailto:${siteConfig.links.email}` : 'mailto:support@gentleduck.org'}
+        target="_blank">
+        <Mail />
+        <span className="">Email</span>
+      </Link>
+    </>
+  )
+}

package/src/components/layouts/site-header/header-shell.tsx

@@ -0,0 +1,75 @@
+'use client'
+
+import { useSiteConfig } from '@duck-docs/context'
+import { cn } from '@gentleduck/libs/cn'
+import Image from 'next/image'
+import Link from 'next/link'
+import type React from 'react'
+
+type HeaderRootProps = React.HTMLAttributes<HTMLElement>
+
+type HeaderContainerProps = React.HTMLAttributes<HTMLDivElement>
+
+type HeaderBrandProps = {
+  className?: string
+  href?: string
+  logoClassName?: string
+  name?: string
+  nameClassName?: string
+  showName?: boolean
+}
+
+type HeaderSectionProps = React.HTMLAttributes<HTMLDivElement>
+
+export function HeaderRoot({ className, ...props }: HeaderRootProps) {
+  return <header className={cn('sticky top-0 z-[47] w-full', className)} {...props} />
+}
+
+export function HeaderContainer({ className, children, ...props }: HeaderContainerProps) {
+  return (
+    <div className="container-wrapper">
+      <div className={cn('container flex h-16 items-center justify-between gap-2 md:gap-4', className)} {...props}>
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export function HeaderBrand({
+  className,
+  href = '/',
+  logoClassName,
+  name,
+  nameClassName,
+  showName = true,
+}: HeaderBrandProps) {
+  const siteConfig = useSiteConfig()
+  const logoDark = siteConfig.branding?.logoDark ?? '/icons/dark.png'
+  const logoLight = siteConfig.branding?.logoLight ?? '/icons/light.png'
+  const label = name ?? siteConfig.name
+  const nameClasses = nameClassName ?? 'hidden font-bold lg:inline-block'
+
+  return (
+    <Link className={cn('flex items-center gap-2 text-foreground', className)} href={href}>
+      <Image
+        alt="Logo"
+        className={cn('hidden h-6 w-6 dark:block', logoClassName)}
+        height={512}
+        src={logoDark}
+        width={512}
+      />
+      <Image
+        alt="Logo"
+        className={cn('block h-6 w-6 dark:hidden', logoClassName)}
+        height={512}
+        src={logoLight}
+        width={512}
+      />
+      {showName ? <span className={nameClasses}>{label}</span> : null}
+    </Link>
+  )
+}
+
+export function HeaderSection({ className, ...props }: HeaderSectionProps) {
+  return <div className={cn('flex items-center gap-2', className)} {...props} />
+}