26:I[422844,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/21av_b8oy010d.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/22u5ol3xt7zuq.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/1fo13zgcoxhue.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/2d5j-ur4v-txa.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/250n3vmqnkfi0.js","/_next/static/chunks/0kf9_gzg497uv.js"],"ThemeToggle"] 27:I[276592,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/21av_b8oy010d.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/22u5ol3xt7zuq.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/1fo13zgcoxhue.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/2d5j-ur4v-txa.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/250n3vmqnkfi0.js","/_next/static/chunks/0kf9_gzg497uv.js"],"AccountMenu"] 28:I[32297,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/21av_b8oy010d.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/22u5ol3xt7zuq.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/1fo13zgcoxhue.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/2d5j-ur4v-txa.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/250n3vmqnkfi0.js","/_next/static/chunks/0kf9_gzg497uv.js"],"MobileNav"] 29:I[505014,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/21av_b8oy010d.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/22u5ol3xt7zuq.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/1fo13zgcoxhue.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/2d5j-ur4v-txa.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/250n3vmqnkfi0.js","/_next/static/chunks/0kf9_gzg497uv.js"],"default"] 2a:I[729657,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/21av_b8oy010d.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/22u5ol3xt7zuq.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/1fo13zgcoxhue.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/2d5j-ur4v-txa.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/250n3vmqnkfi0.js","/_next/static/chunks/0kf9_gzg497uv.js"],"FavoriteButton"] 2b:I[534073,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/21av_b8oy010d.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/22u5ol3xt7zuq.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/1fo13zgcoxhue.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/2d5j-ur4v-txa.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/250n3vmqnkfi0.js","/_next/static/chunks/0kf9_gzg497uv.js"],"InstallCommand"] 2c:I[868814,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/21av_b8oy010d.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/22u5ol3xt7zuq.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/1fo13zgcoxhue.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/2d5j-ur4v-txa.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/250n3vmqnkfi0.js","/_next/static/chunks/0kf9_gzg497uv.js"],"BlockPreview"] 35:I[713354,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/21av_b8oy010d.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/22u5ol3xt7zuq.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/1fo13zgcoxhue.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/2d5j-ur4v-txa.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/250n3vmqnkfi0.js","/_next/static/chunks/0kf9_gzg497uv.js"],"Toaster"] 1b:["$","$L1a","/themes",{"href":"/themes","children":"Themes","data-slot":"button","data-variant":"ghost","data-size":"sm","className":"group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5","ref":null}] 1c:["$","$L1a","/styles",{"href":"/styles","children":"Styles","data-slot":"button","data-variant":"ghost","data-size":"sm","className":"group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5","ref":null}] 1d:["$","$L1a","/components",{"href":"/components","children":"Components","data-slot":"button","data-variant":"ghost","data-size":"sm","className":"group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5","ref":null}] 1e:["$","$L1a","/docs",{"href":"/docs","children":"Docs","data-slot":"button","data-variant":"ghost","data-size":"sm","className":"group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5","ref":null}] 1f:["$","$L1a","/changelog",{"href":"/changelog","children":"Changelog","data-slot":"button","data-variant":"ghost","data-size":"sm","className":"group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5","ref":null}] 20:["$","$L1a","/#pricing",{"href":"/#pricing","children":"Pricing","data-slot":"button","data-variant":"ghost","data-size":"sm","className":"group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5","ref":null}] 21:["$","div",null,{"className":"ml-auto flex items-center gap-1","children":[["$","$L26",null,{}],["$","$L27",null,{}],["$","$L1a",null,{"href":"/blocks","children":"Browse blocks","data-slot":"button","data-variant":"default","data-size":"sm","className":"group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/80 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5 max-sm:hidden","ref":null}],["$","$L28",null,{"title":"lib","links":[{"href":"/blocks","label":"Blocks"},{"href":"/examples","label":"Examples"},{"href":"/builder","label":"Builder"},{"href":"/themes","label":"Themes"},{"href":"/styles","label":"Styles"},{"href":"/components","label":"Components"},{"href":"/docs","label":"Docs"},{"href":"/changelog","label":"Changelog"},{"href":"/#pricing","label":"Pricing"}],"primary":{"label":"Browse blocks","href":"/blocks"},"secondary":{"label":"Open the builder","href":"/builder"},"className":"md:inline-flex lg:hidden"}]]}] 22:["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"[{\"@context\":\"https://schema.org\",\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blocks\",\"item\":\"https://shadcn.srv1505958.hstgr.cloud/blocks\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Integrations\",\"item\":\"https://shadcn.srv1505958.hstgr.cloud/blocks/integrations\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Integrations 03: Categories and connect\",\"item\":\"https://shadcn.srv1505958.hstgr.cloud/blocks/integrations/integrations-03\"}]},{\"@context\":\"https://schema.org\",\"@type\":\"SoftwareSourceCode\",\"name\":\"Integrations 03: Categories and connect\",\"description\":\"Category sidebar with counts and connectable integrations.\",\"url\":\"https://shadcn.srv1505958.hstgr.cloud/blocks/integrations/integrations-03\",\"programmingLanguage\":\"TypeScript\",\"runtimePlatform\":\"React\",\"version\":\"1.0.0\",\"isAccessibleForFree\":true,\"publisher\":{\"@type\":\"Organization\",\"name\":\"lib\"}}]"}}] 2d:T559,

import { Integrations03 } from "@/components/integrations-03"

export default function Page() {
  return <Integrations03 />
}

2e:T12b7,// @lib/integrations-03@1.0.0 · changes: https://shadcn.srv1505958.hstgr.cloud/changelog "use client" import * as React from "react" import { siAirtable, siGooglebigquery, siHubspot, siIntercom, siMailchimp, siPaddle, siPostgresql, siSnowflake, siStripe, siZendesk, type SimpleIcon, } from "simple-icons" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { BrandLogo } from "@/components/brand-logo" const apps: { icon: SimpleIcon; category: string; description: string; connected?: boolean }[] = [ { icon: siStripe, category: "Billing", description: "Subscriptions, invoices and refunds.", connected: true }, { icon: siPaddle, category: "Billing", description: "Paddle Billing and Classic." }, { icon: siHubspot, category: "CRM", description: "MRR on every company record.", connected: true }, { icon: siIntercom, category: "Support", description: "Plan and MRR next to every conversation." }, { icon: siZendesk, category: "Support", description: "Prioritize tickets from paying customers." }, { icon: siMailchimp, category: "Marketing", description: "Segment campaigns by plan or churn risk." }, { icon: siPostgresql, category: "Data", description: "Query metrics with plain SQL." }, { icon: siSnowflake, category: "Data", description: "Daily exports to your warehouse." }, { icon: siGooglebigquery, category: "Data", description: "Stream events to BigQuery." }, { icon: siAirtable, category: "Data", description: "Keep a base in sync with any table." }, ] const categories = ["All", "Billing", "CRM", "Support", "Marketing", "Data"] export function Integrations03() { const [category, setCategory] = React.useState("All") const [connected, setConnected] = React.useState(() => apps.filter((app) => app.connected).map((app) => app.icon.slug)) const visible = apps.filter((app) => category === "All" || app.category === category) return (

Integrations

{categories.map((item) => { const count = item === "All" ? apps.length : apps.filter((app) => app.category === item).length return ( ) })}

{app.icon.title} {isConnected && } {app.description}

) } 2f:T929d,

// @lib/integrations-03@1.0.0 · changes: https://shadcn.srv1505958.hstgr.cloud/changelog
"use client"

import * as React from "react"
import {
  siAirtable,
  siGooglebigquery,
  siHubspot,
  siIntercom,
  siMailchimp,
  siPaddle,
  siPostgresql,
  siSnowflake,
  siStripe,
  siZendesk,
  type SimpleIcon,
} from "simple-icons"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { BrandLogo } from "@/components/brand-logo"

const apps: { icon: SimpleIcon; category: string; description: string; connected?: boolean }[] = [
  { icon: siStripe, category: "Billing", description: "Subscriptions, invoices and refunds.", connected: true },
  { icon: siPaddle, category: "Billing", description: "Paddle Billing and Classic." },
  { icon: siHubspot, category: "CRM", description: "MRR on every company record.", connected: true },
  { icon: siIntercom, category: "Support", description: "Plan and MRR next to every conversation." },
  { icon: siZendesk, category: "Support", description: "Prioritize tickets from paying customers." },
  { icon: siMailchimp, category: "Marketing", description: "Segment campaigns by plan or churn risk." },
  { icon: siPostgresql, category: "Data", description: "Query metrics with plain SQL." },
  { icon: siSnowflake, category: "Data", description: "Daily exports to your warehouse." },
  { icon: siGooglebigquery, category: "Data", description: "Stream events to BigQuery." },
  { icon: siAirtable, category: "Data", description: "Keep a base in sync with any table." },
]

const categories = ["All", "Billing", "CRM", "Support", "Marketing", "Data"]

export function Integrations03() {
  const [category, setCategory] = React.useState("All")
  const [connected, setConnected] = React.useState(() => apps.filter((app) => app.connected).map((app) => app.icon.slug))
  const visible = apps.filter((app) => category === "All" || app.category === category)

  return (
    <section className="px-4 py-16 sm:px-6 sm:py-24">
      <div className="mx-auto grid max-w-6xl grid-cols-1 overflow-hidden rounded-2xl border md:grid-cols-[14rem_1fr]">
        <div className="flex flex-col gap-4 border-b bg-muted/30 p-5 md:border-r md:border-b-0">
          <h2 className="font-heading text-xl font-semibold tracking-tight">Integrations</h2>
          <nav aria-label="Categories" className="flex gap-1 overflow-x-auto md:flex-col">
            {categories.map((item) => {
              const count = item === "All" ? apps.length : apps.filter((app) => app.category === item).length
              return (
                <button
                  key={item}
                  type="button"
                  aria-pressed={category === item}
                  onClick={() => setCategory(item)}
                  className={cn(
                    "flex items-center justify-between gap-4 rounded-md px-2.5 py-1.5 text-sm whitespace-nowrap text-muted-foreground transition-colors hover:text-foreground",
                    category === item && "bg-background text-foreground shadow-xs"
                  )}
                >
                  {item}
                  <span className="text-xs tabular-nums">{count}</span>
                </button>
              )
            })}
          </nav>
        </div>
        <ul className="grid grid-cols-1 divide-y sm:grid-cols-2 sm:divide-y-0" aria-live="polite">
          {visible.map((app) => {
            const isConnected = connected.includes(app.icon.slug)
            return (
              <li key={app.icon.slug} className="flex items-start gap-4 border-b p-5 animate-in fade-in duration-300 sm:odd:border-r">
                <span className="flex size-11 shrink-0 items-center justify-center rounded-xl border bg-card">
                  <BrandLogo icon={app.icon} colored className="size-6" title="" />
                </span>
                <div className="flex min-w-0 flex-1 flex-col gap-0.5">
                  <span className="flex items-center gap-2 font-medium">
                    {app.icon.title}
                    {isConnected && <span className="size-1.5 rounded-full bg-chart-4" role="img" aria-label="Connected" />}
                  </span>
                  <span className="text-sm text-muted-foreground">{app.description}</span>
                </div>
                <Button
                  size="sm"
                  variant={isConnected ? "secondary" : "outline"}
                  onClick={() =>
                    setConnected((list) => (isConnected ? list.filter((slug) => slug !== app.icon.slug) : [...list, app.icon.slug]))
                  }
                >
                  {isConnected ? "Connected" : "Connect"}
                </Button>
              </li>
            )
          })}
        </ul>
      </div>
    </section>
  )
}

30:T58e,// @lib/brand-logo@1.0.0 · changes: https://shadcn.srv1505958.hstgr.cloud/changelog import * as React from "react" import type { SimpleIcon } from "simple-icons" import { cn } from "@/lib/utils" type BrandLogoProps = Omit, "children"> & { /** Any icon from `simple-icons`, e.g. `import { siStripe } from "simple-icons"` */ icon: SimpleIcon /** Use the brand color. Very dark brand colors fall back to the text color so they stay visible. */ colored?: boolean /** Accessible name. Defaults to the brand name; pass "" when a visible label is next to it. */ title?: string } function isTooDark(hex: string) { const value = parseInt(hex, 16) const r = (value >> 16) & 255 const g = (value >> 8) & 255 const b = value & 255 return (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255 < 0.2 } function BrandLogo({ icon, colored = false, title, className, ...props }: BrandLogoProps) { const label = title ?? icon.title const fill = colored && !isTooDark(icon.hex) ? `#${icon.hex}` : "currentColor" return ( ) } export { BrandLogo, type BrandLogoProps } 31:T3d56,

// @lib/brand-logo@1.0.0 · changes: https://shadcn.srv1505958.hstgr.cloud/changelog
import * as React from "react"
import type { SimpleIcon } from "simple-icons"

import { cn } from "@/lib/utils"

type BrandLogoProps = Omit<React.ComponentProps<"svg">, "children"> & {
  /** Any icon from `simple-icons`, e.g. `import { siStripe } from "simple-icons"` */
  icon: SimpleIcon
  /** Use the brand color. Very dark brand colors fall back to the text color so they stay visible. */
  colored?: boolean
  /** Accessible name. Defaults to the brand name; pass "" when a visible label is next to it. */
  title?: string
}

function isTooDark(hex: string) {
  const value = parseInt(hex, 16)
  const r = (value >> 16) & 255
  const g = (value >> 8) & 255
  const b = value & 255
  return (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255 < 0.2
}

function BrandLogo({ icon, colored = false, title, className, ...props }: BrandLogoProps) {
  const label = title ?? icon.title
  const fill = colored && !isTooDark(icon.hex) ? `#${icon.hex}` : "currentColor"

  return (
    <svg
      viewBox="0 0 24 24"
      role={label ? "img" : undefined}
      aria-label={label || undefined}
      aria-hidden={label ? undefined : true}
      data-slot="brand-logo"
      className={cn("size-5 shrink-0", className)}
      fill={fill}
      {...props}
    >
      <path d={icon.path} />
    </svg>
  )
}

export { BrandLogo, type BrandLogoProps }

32:Td2f,

What it installs

Versions

More integrations blocks