4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T279f,import { useMemo, useState } from 'react' import clsx from 'clsx' import { Card, RowCard } from '../surface' import { Shell, Sidebar, Stack, Row, Spacer } from '../layout' import { Heading, Text, Eyebrow } from '../text' import { Avatar } from '../avatar' import { Badge, Blob, Dot } from '../media' import { Button } from '../Button' import { Icon } from '../Icon' import { Input, Textarea } from '../Input' import { Empty } from '../feedback' import { NavLink } from '../NavLink' import { BottomNav, type NavItem } from '../BottomNav' const NAV: NavItem[] = [ { href: '/', label: 'Overview', icon: 'overview', tone: 'purple' }, { href: '/inbox', label: 'Inbox', icon: 'mail', tone: 'blue' }, { href: '/board', label: 'Board', icon: 'log', tone: 'mint' }, { href: '/messages', label: 'Messages', icon: 'comment', tone: 'pink' }, { href: '/settings', label: 'Settings', icon: 'settings', tone: 'orange' }, ] const HERE = '/inbox' interface Mail { id: string from: string subject: string preview: string body: string time: string tone: 'purple' | 'pink' | 'blue' | 'mint' unread: boolean } const MAIL: Mail[] = [ { id: '1', from: 'Maya Bloom', subject: 'The cushion buttons shipped', preview: 'Just merged — depth really does sell it.', body: 'Just merged — depth really does sell it. Take a look when you get a sec.', time: '9:41', tone: 'mint', unread: true }, { id: '2', from: 'Grace Hopper', subject: 'Migration is green', preview: 'Zero visual drift across 2,700 lines.', body: 'Zero visual drift across 2,700 lines. The snapshot gate paid off.', time: '8:12', tone: 'blue', unread: true }, { id: '3', from: 'Katherine J.', subject: 'Optical centering notes', preview: 'Attached the write-up.', body: 'Attached the write-up on why a centered glyph looks low on a cushion.', time: 'Yesterday', tone: 'pink', unread: false }, { id: '4', from: 'Alan Turing', subject: 'Variants over classNames', preview: 'A short argument for the strict API.', body: 'A short argument for why the strict API keeps everything on-system.', time: 'Yesterday', tone: 'purple', unread: false }, ] const PANES = 'grid [grid-template-columns:minmax(0,320px)_minmax(0,1fr)] min-h-[520px] max-[900px]:[grid-template-columns:minmax(0,1fr)]' /** An example email inbox: app shell, a mail list you can actually search, and * a reading pane that replies. Below 900px the two panes become one — the list, * then the message — because side-by-side at phone width reads neither. */ export function InboxBlock() { const [active, setActive] = useState('1') const [query, setQuery] = useState('') const [read, setRead] = useState([]) const [replying, setReplying] = useState(false) const [draft, setDraft] = useState('') const [sent, setSent] = useState([]) /* Only consulted below 900px, where exactly one pane shows at a time. Above * it both panes are always visible and this is inert. */ const [pane, setPane] = useState<'list' | 'detail'>('list') const results = useMemo(() => { const q = query.trim().toLowerCase() if (!q) return MAIL return MAIL.filter((m) => `${m.from} ${m.subject} ${m.body}`.toLowerCase().includes(q), ) }, [query]) const current = MAIL.find((m) => m.id === active) ?? MAIL[0]! const unreadCount = MAIL.filter((m) => m.unread && !read.includes(m.id)).length function open(id: string) { setActive(id) setRead((r) => (r.includes(id) ? r : [...r, id])) setReplying(false) setDraft('') setPane('detail') } function send() { if (!draft.trim()) return setSent((s) => [...s, draft.trim()]) setDraft('') setReplying(false) } return ( <> Acme {NAV.map((item) => ( {item.label} ))} Mail Inbox {unreadCount > 0 && {unreadCount} unread}

{/* List pane */}

{results.length === 0 ? (

Nothing here matches “{query}”.

) : ( results.map((m) => ( open(m.id)} selected={m.id === active}> {m.from} {m.unread && !read.includes(m.id) && } {m.subject} {m.time} )) )}

{/* Reading pane */}

{/* Phone-only: the list is gone, so this is the way back. */} {current.subject}

{current.from} to me · {current.time} {current.body} Let me know what you think — happy to walk through it on a call. {sent.map((s, i) => (

You replied {s}

))} {replying ? (

<Row gap={2}>
                          <Button onClick={send} tone="mint" label="Send reply">
                            <Icon name="send" size="sm" /> Send
                          </Button>
                          <Button variant="quiet" onClick={() => { setReplying(false); setDraft('') }}>
                            Cancel
                          </Button>
                        </Row>
                      </Stack>
                    ) : (
                      <Row gap={2}>
                        <Button onClick={() => setReplying(true)} label="Reply">
                          <Icon name="rewind" size="sm" /> Reply
                        </Button>
                        <Button variant="quiet" label="Forward">
                          <Icon name="forward" size="sm" /> Forward
                        </Button>
                      </Row>
                    )}
                  </Stack>
                </div>
              </div>
            </div>
          </Card>
          <Spacer />
        </Stack>
      </Shell>
      <BottomNav primary={NAV.slice(0, 4)} groups={[{ title: 'App', items: NAV }]} currentPath={HERE} />
    </>
  )
}
4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"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"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}]]}],["$","$L4e",null,{"namespace":"@1st-pouf","registryDependencies":["https://1st-pouf.worksonmy.dev/r/avatar.json","https://1st-pouf.worksonmy.dev/r/base.json","https://1st-pouf.worksonmy.dev/r/bottom-nav.json","https://1st-pouf.worksonmy.dev/r/button.json","https://1st-pouf.worksonmy.dev/r/feedback.json","https://1st-pouf.worksonmy.dev/r/icon.json","https://1st-pouf.worksonmy.dev/r/input.json","https://1st-pouf.worksonmy.dev/r/layout.json","https://1st-pouf.worksonmy.dev/r/media.json","https://1st-pouf.worksonmy.dev/r/nav-link.json","https://1st-pouf.worksonmy.dev/r/surface.json","https://1st-pouf.worksonmy.dev/r/text.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/pouf/blocks/inbox.tsx","content":"$50","type":"registry:block","target":"components/pouf/blocks/inbox.tsx"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>