https://mudasir.in/_next/static/chunks/component-container-CZo3i-0N.js

1import{r as e}from"./rolldown-runtime-hePW80VL.js";import{i as t,r as n}from"./framework-A1pNZAzD.js";import{t as r}from"./createReactComponent-DT9hXg-B.js";import{t as i}from"./IconCheck-BRiZvyIn.js";import{t as a}from"./IconChevronDown-C6tu4Zvl.js";import{t as o}from"./IconCode-uP0PfXmR.js";import{t as s}from"./IconCopy-BmuyMjSk.js";import{t as c}from"./link-50nOxOHj.js";var l=r(`outline`,`arrow-left`,`ArrowLeft`,[[`path`,{d:`M5 12l14 0`,key:`svg-0`}],[`path`,{d:`M5 12l6 6`,key:`svg-1`}],[`path`,{d:`M5 12l6 -6`,key:`svg-2`}]]),u=r(`outline`,`chevron-up`,`ChevronUp`,[[`path`,{d:`M6 15l6 -6l6 6`,key:`svg-0`}]]),d=r(`outline`,`eye`,`Eye`,[[`path`,{d:`M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0`,key:`svg-0`}],[`path`,{d:`M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6`,key:`svg-1`}]]),f=e(t(),1),p=n();function m({children:e}){return(0,p.jsx)(`span`,{className:`figure-label`,children:e})}function h({className:e=``}){return(0,p.jsx)(`div`,{"aria-hidden":!0,className:`hatched-divider ${e}`})}function g({backHref:e,backLabel:t,eyebrow:n,title:r,description:i,meta:a}){return(0,p.jsxs)(`header`,{className:`border-b border-line px-4 py-7 sm:px-7 sm:py-9`,children:[(0,p.jsxs)(c,{href:e,className:`inline-flex min-h-9 items-center gap-2 font-mono text-[10px] uppercase tracking-[0.12em] text-muted-foreground hover:text-foreground`,children:[(0,p.jsx)(l,{size:14,"aria-hidden":!0}),t]}),(0,p.jsxs)(`div`,{className:`mt-6 grid gap-5 lg:grid-cols-[minmax(0,1fr)_minmax(18rem,.7fr)] lg:items-end`,children:[(0,p.jsxs)(`div`,{children:[(0,p.jsx)(m,{children:n}),(0,p.jsx)(`h1`,{className:`mt-4 text-3xl font-semibold tracking-[-0.05em] sm:text-5xl`,children:r})]}),(0,p.jsxs)(`div`,{children:[(0,p.jsx)(`p`,{className:`text-sm leading-6 text-muted-foreground sm:text-base`,children:i}),a?(0,p.jsx)(`div`,{className:`mt-4`,children:a}):null]})]})]})}function _({title:e,description:t,sourceCode:n,addCommand:r,dependencies:c,children:l}){let[m,_]=(0,f.useState)(!1),[v,y]=(0,f.useState)(!1),[b,x]=(0,f.useState)(`preview`),[S,C]=(0,f.useState)(!1),w=async(e,t)=>{try{await navigator.clipboard.writeText(e)}catch{let t=document.createElement(`textarea`);t.value=e,document.body.appendChild(t),t.select(),document.execCommand(`copy`),t.remove()}t()};return(0,p.jsxs)(`article`,{className:`border-b border-line`,children:[(0,p.jsx)(g,{backHref:`/components`,backLabel:`Component index`,eyebrow:`Component specification`,title:e,description:t,meta:(0,p.jsxs)(`div`,{className:`flex flex-wrap gap-2 font-mono text-[9px] uppercase tracking-[0.1em] text-muted-foreground`,children:[(0,p.jsx)(`span`,{className:`border border-line bg-chip px-2 py-1`,children:`React`}),(0,p.jsx)(`span`,{className:`border border-line bg-chip px-2 py-1`,children:`Copyable source`}),(0,p.jsx)(`span`,{className:`border border-line bg-chip px-2 py-1`,children:`Free`})]})}),(0,p.jsx)(`div`,{className:`border-b border-line px-4 py-5 sm:px-7`,children:(0,p.jsxs)(`div`,{role:`tablist`,"aria-label":`Component view`,className:`inline-grid grid-cols-2 border border-line bg-card p-1`,children:[(0,p.jsxs)(`button`,{id:`component-preview-tab`,type:`button`,role:`tab`,"aria-selected":b===`preview`,"aria-controls":`component-preview-panel`,onClick:()=>x(`preview`),className:`inline-flex min-h-10 items-center justify-center gap-2 px-4 text-sm font-semibold ${b===`preview`?`theme-action`:`text-muted-foreground hover:bg-chip hover:text-foreground`}`,children:[(0,p.jsx)(d,{size:15,"aria-hidden":!0}),` Preview`]}),(0,p.jsxs)(`button`,{id:`component-code-tab`,type:`button`,role:`tab`,"aria-selected":b===`code`,"aria-controls":`component-code-panel`,onClick:()=>x(`code`),className:`inline-flex min-h-10 items-center justify-center gap-2 px-4 text-sm font-semibold ${b===`code`?`theme-action`:`text-muted-foreground hover:bg-chip hover:text-foreground`}`,children:[(0,p.jsx)(o,{size:15,"aria-hidden":!0}),` Code`]})]})}),(0,p.jsx)(`div`,{className:`p-3 sm:p-5`,children:b===`preview`?(0,p.jsx)(`div`,{id:`component-preview-panel`,role:`tabpanel`,"aria-labelledby":`component-preview-tab`,className:`flex min-h-[260px] items-center justify-center overflow-x-auto border border-line bg-surface p-4 sm:min-h-[360px] sm:p-8`,children:(0,p.jsx)(`div`,{className:`flex w-full min-w-0 justify-center`,children:l})}):(0,p.jsxs)(`div`,{id:`component-code-panel`,role:`tabpanel`,"aria-labelledby":`component-code-tab`,className:`overflow-hidden border border-neutral-700 bg-neutral-950`,children:[(0,p.jsxs)(`div`,{className:`flex flex-wrap items-center justify-between gap-2 border-b border-white/10 px-3 py-2.5 sm:px-4`,children:[(0,p.jsxs)(`span`,{className:`font-mono text-[10px] uppercase tracking-[0.12em] text-neutral-400`,children:[n.split(`
2`).length,` lines / JSX`]}),(0,p.jsxs)(`div`,{className:`flex items-center gap-1.5`,children:[(0,p.jsxs)(`button`,{type:`button`,onClick:()=>C(e=>!e),className:`inline-flex min-h-9 items-center gap-1.5 border border-white/15 px-3 text-xs font-semibold text-neutral-300 hover:bg-white/10`,children:[S?(0,p.jsx)(u,{size:14,"aria-hidden":!0}):(0,p.jsx)(a,{size:14,"aria-hidden":!0}),S?`Collapse`:`Expand`]}),(0,p.jsxs)(`button`,{type:`button`,onClick:()=>w(n,()=>{_(!0),setTimeout(()=>_(!1),2e3)}),className:`inline-flex min-h-9 items-center gap-1.5 border border-white/15 bg-white/10 px-3 text-xs font-semibold text-neutral-200 hover:bg-white/15`,children:[m?(0,p.jsx)(i,{size:14,"aria-hidden":!0}):(0,p.jsx)(s,{size:14,"aria-hidden":!0}),m?`Copied`:`Copy code`]})]})]}),(0,p.jsx)(`pre`,{className:`overflow-x-auto text-xs leading-relaxed ${S?``:`max-h-[28rem] overflow-y-auto`}`,children:(0,p.jsx)(`code`,{className:`block px-4 py-4 font-mono whitespace-pre text-neutral-100`,children:n})}),(0,p.jsx)(`p`,{className:`sr-only`,"aria-live":`polite`,children:m?`Source code 

2copied`:``})]})}),(0,p.jsxs)(`section`,{className:`grid border-t border-line lg:grid-cols-[.55fr_1fr]`,children:[(0,p.jsxs)(`div`,{className:`border-b border-line p-5 sm:p-7 lg:border-r lg:border-b-0`,children:[(0,p.jsx)(`p`,{className:`font-mono text-[10px] uppercase tracking-[0.14em] text-muted-foreground`,children:`Usage / setup`}),(0,p.jsx)(`h2`,{className:`mt-3 text-xl font-semibold tracking-[-0.03em]`,children:`Install with shadcn`}),(0,p.jsx)(`p`,{className:`mt-2 text-sm leading-6 text-muted-foreground`,children:`Add this component straight into your codebase with the shadcn CLI. It writes the source file and installs the required dependencies.`})]}),(0,p.jsxs)(`div`,{className:`p-5 sm:p-7`,children:[(0,p.jsx)(`p`,{className:`font-mono text-[10px] uppercase tracking-[0.12em] text-muted-foreground`,children:`shadcn CLI`}),(0,p.jsxs)(`div`,{className:`mt-3 flex flex-col gap-2 sm:flex-row`,children:[(0,p.jsx)(`code`,{className:`min-w-0 flex-1 overflow-x-auto border border-line bg-muted px-3 py-3 font-mono text-xs text-foreground`,children:r}),(0,p.jsxs)(`button`,{type:`button`,onClick:()=>w(r,()=>{y(!0),setTimeout(()=>y(!1),2e3)}),className:`theme-action inline-flex min-h-11 items-center justify-center gap-2 px-4 text-xs font-semibold`,children:[v?(0,p.jsx)(i,{size:14,"aria-hidden":!0}):(0,p.jsx)(s,{size:14,"aria-hidden":!0}),v?`Copied`:`Copy command`]})]}),(0,p.jsx)(`p`,{className:`sr-only`,"aria-live":`polite`,children:v?`shadcn command copied`:``}),(0,p.jsx)(`p`,{className:`mt-6 font-mono text-[10px] uppercase tracking-[0.12em] text-muted-foreground`,children:`Dependencies`}),c.length>0?(0,p.jsx)(`ul`,{className:`mt-3 flex flex-wrap gap-1.5`,children:c.map(e=>(0,p.jsx)(`li`,{className:`border border-line bg-chip px-2 py-1 font-mono text-[10px] text-foreground`,children:e},e))}):(0,p.jsx)(`p`,{className:`mt-3 text-sm leading-6 text-muted-foreground`,children:`No external packages — only React and Tailwind classes.`}),(0,p.jsxs)(`p`,{className:`mt-4 text-sm leading-6 text-muted-foreground`,children:[`Theme colors are controlled by the `,(0,p.jsx)(`code`,{className:`border border-line bg-chip px-1.5 py-0.5 font-mono text-xs text-foreground`,children:`--theme-color-*`}),` custom properties.`]})]})]}),(0,p.jsx)(h,{className:`border-t`})]})}export{_ as default};