{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"marketing-blog-sections-expert-roundup","type":"registry:block","title":"Expert Roundup","files":[{"path":"components/blocks/marketing/blog-sections/expert-roundup.tsx","content":"import { Button } from '@/components/ui/button';\nimport { Badge } from '@/components/ui/badge';\nimport { Card, CardFooter } from '@/components/ui/card';\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';\nimport { ExternalLink, BookOpen, MessageCircle, Quote, ThumbsUp, Share2 } from 'lucide-react';\nimport { Twitter } from '@/components/ui/brand-icons';\nimport { Linkedin } from '@/components/ui/brand-icons';\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';\n\n// Types\ninterface Expert {\n  id: string;\n  name: string;\n  title: string;\n  company: string;\n  avatarUrl: string;\n  bio: string;\n  response: string;\n  socialLinks?: {\n    twitter?: string;\n    linkedin?: string;\n    website?: string;\n  };\n}\n\ninterface ExpertRoundupData {\n  id: string;\n  title: string;\n  subtitle: string;\n  topic: string;\n  introText: string;\n  question: string;\n  publishDate: string;\n  categories: string[];\n  experts: Expert[];\n  conclusion: string;\n}\n\n// Sample data\nconst expertRoundupData: ExpertRoundupData = {\n  id: 'content-marketing-trends-2023',\n  title: 'Content Marketing Trends for 2023',\n  subtitle: '12 Industry Experts Share Their Predictions',\n  topic: 'Content Marketing',\n  introText:\n    \"As we move further into the digital age, content marketing continues to evolve at a rapid pace. To help you stay ahead of the curve, we've reached out to leading experts in the field to get their insights on the most important trends shaping content marketing in 2023 and beyond.\",\n  question:\n    'What do you believe will be the biggest trend or shift in content marketing strategy for 2023?',\n  publishDate: 'January 15, 2023',\n  categories: ['Content Marketing', 'Industry Trends', 'Expert Opinions'],\n  experts: [\n    {\n      id: 'expert-1',\n      name: 'Alex Reynolds',\n      title: 'Chief Marketing Officer',\n      company: 'GrowthLab Digital',\n      avatarUrl:\n        'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=200&auto=format&fit=crop',\n      bio: 'Alex has over 15 years of experience in digital marketing and has helped scale content operations for several Fortune 500 companies.',\n      response:\n        \"The biggest shift I'm seeing is towards what I call 'content atomization' – creating a single, comprehensive piece of content and then breaking it down into dozens of micro-content pieces optimized for different platforms and formats. This approach maximizes ROI on content creation while addressing the decreasing attention spans across digital channels. Companies that master this approach will see 3-5x more engagement from the same content investment.\",\n      socialLinks: {\n        twitter: '#',\n        linkedin: '#',\n        website: '#',\n      },\n    },\n    {\n      id: 'expert-2',\n      name: 'Sophia Chen',\n      title: 'Content Strategy Director',\n      company: 'TechInnovate',\n      avatarUrl:\n        'https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=200&auto=format&fit=crop',\n      bio: 'Sophia specializes in B2B content strategy and has pioneered several data-driven approaches to content optimization.',\n      response:\n        \"AI-assisted content creation will become mainstream, but not in the way most people think. The best content teams won't use AI to replace writers but to enhance human creativity and productivity. I expect to see content teams using AI for research, outlining, editing, and personalization at scale, while keeping human creativity at the core. This hybrid approach will allow brands to produce more personalized content without losing authenticity.\",\n      socialLinks: {\n        linkedin: '#',\n        website: '#',\n      },\n    },\n    {\n      id: 'expert-3',\n      name: 'Marcus Johnson',\n      title: 'Founder',\n      company: 'ContentScale Academy',\n      avatarUrl:\n        'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=200&auto=format&fit=crop',\n      bio: 'Marcus runs one of the most popular content marketing education platforms, training over 50,000 marketers annually.',\n      response:\n        \"User-generated content will evolve from a nice-to-have to a strategic necessity. As consumer trust in branded content continues to decline, smart companies will build systematic approaches to cultivate, curate, and amplify authentic customer voices. This isn't just about collecting reviews – it's about building community-driven content programs that turn customers into contributors and advocates. The brands that do this well will see dramatic improvements in both trust metrics and conversion rates.\",\n      socialLinks: {\n        twitter: '#',\n        linkedin: '#',\n        website: '#',\n      },\n    },\n    {\n      id: 'expert-4',\n      name: 'Priya Sharma',\n      title: 'VP of Content',\n      company: 'GlobalReach Media',\n      avatarUrl:\n        'https://images.unsplash.com/photo-1534751516642-a1af1ef26a56?q=80&w=200&auto=format&fit=crop',\n      bio: 'Priya has led content strategy for multinational brands across APAC, Europe, and North America.',\n      response:\n        \"Content localization is becoming more sophisticated and essential. It's no longer enough to simply translate content for different markets – you need to culturally adapt it while maintaining brand consistency. I'm seeing leading companies invest in AI-powered localization tools combined with local content creators to produce truly resonant content for each market. This 'glocal' approach – global strategy with local execution – will be critical for brands with international ambitions.\",\n      socialLinks: {\n        linkedin: '#',\n        website: '#',\n      },\n    },\n    {\n      id: 'expert-5',\n      name: 'David Ogilvy',\n      title: 'Content Intelligence Lead',\n      company: 'DataDriven Content',\n      avatarUrl:\n        'https://images.unsplash.com/photo-1530268729831-4b0b9e170218?q=80&w=200&auto=format&fit=crop',\n      bio: 'David combines content expertise with data science to help companies optimize their content performance.',\n      response:\n        \"Real-time content optimization based on audience behavior will become the new standard. Static content calendars planned months in advance will give way to more dynamic approaches that respond to audience signals. The most successful content teams will build systems that can quickly identify trending topics, test multiple angles, and double down on what's working. This requires not just new tools but a cultural shift toward more agile content operations.\",\n      socialLinks: {\n        twitter: '#',\n        linkedin: '#',\n      },\n    },\n    {\n      id: 'expert-6',\n      name: 'Emma Wilson',\n      title: 'Founder & Content Strategist',\n      company: 'Narrative Studio',\n      avatarUrl:\n        'https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=200&auto=format&fit=crop',\n      bio: 'Emma helps brands develop distinctive voices and narrative frameworks that build audience connection.',\n      response:\n        \"The pendulum is swinging back toward quality over quantity. After years of content saturation, audiences are becoming more selective, and algorithm changes across platforms are increasingly rewarding depth and expertise. I'm advising clients to produce fewer pieces but invest more in each one – more original research, more thoughtful analysis, more memorable storytelling. This approach not only performs better but is more sustainable for content teams facing burnout from constant production demands.\",\n      socialLinks: {\n        twitter: '#',\n        website: '#',\n      },\n    },\n  ],\n  conclusion:\n    \"While each expert brings a unique perspective, several common themes emerge from their predictions. The focus on quality over quantity, the strategic integration of AI tools, and the importance of authentic human connection all point to a more mature phase of content marketing. As the field continues to evolve, successful marketers will need to balance technological innovation with timeless principles of valuable, audience-focused content. By incorporating these insights into your 2023 strategy, you'll be well-positioned to stay ahead of the curve in the changing content landscape.\",\n};\n\nexport default function BlogSectionExpertRoundup() {\n  const {\n    title,\n    subtitle,\n    topic,\n    introText,\n    question,\n    publishDate,\n    categories,\n    experts,\n    conclusion,\n  } = expertRoundupData;\n\n  return (\n    <section className=\"bg-background py-24\">\n      <div className=\"container mx-auto max-w-5xl px-4 md:px-6 2xl:max-w-[1400px]\">\n        {/* Header */}\n        <div className=\"mb-16 text-center\">\n          <div className=\"mb-4 flex justify-center\">\n            <Badge variant=\"outline\" className=\"text-sm\">\n              {topic}\n            </Badge>\n          </div>\n          <h1 className=\"mb-4 text-4xl font-bold tracking-tight md:text-5xl\">\n            {title}\n          </h1>\n          <p className=\"text-muted-foreground mx-auto mb-6 max-w-3xl text-xl\">\n            {subtitle}\n          </p>\n          <div className=\"text-muted-foreground flex items-center justify-center gap-2 text-sm\">\n            <span>Published: {publishDate}</span>\n            <span className=\"text-xs\">•</span>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"h-auto gap-1 p-0 text-sm font-normal\"\n            >\n              <Share2 className=\"h-3.5 w-3.5\" />\n              Share\n            </Button>\n          </div>\n        </div>\n\n        {/* Introduction */}\n        <div className=\"mb-12\">\n          <div className=\"prose prose-lg mb-8 max-w-none\">\n            <p>{introText}</p>\n          </div>\n\n          <div className=\"bg-muted/50 rounded-lg border p-6\">\n            <h2 className=\"mb-3 flex items-center gap-2 text-xl font-semibold\">\n              <MessageCircle className=\"text-primary h-5 w-5\" />\n              Our Question to the Experts\n            </h2>\n            <p className=\"text-lg font-medium italic\">&quot;{question}&quot;</p>\n          </div>\n        </div>\n\n        {/* Categories */}\n        <div className=\"mb-10 flex flex-wrap gap-2\">\n          {categories.map((category, index) => (\n            <Badge key={index} variant=\"secondary\">\n              {category}\n            </Badge>\n          ))}\n        </div>\n\n        {/* Expert responses - Mobile tabs */}\n        <div className=\"mb-16 block md:hidden\">\n          <Tabs defaultValue={experts[0]!.id} className=\"w-full\">\n            <TabsList className=\"mb-6 flex h-auto w-full overflow-auto pb-px\">\n              {experts.map((expert) => (\n                <TabsTrigger\n                  key={expert.id}\n                  value={expert.id}\n                  className=\"flex flex-shrink-0 items-center gap-2 py-2\"\n                >\n                  <Avatar className=\"h-6 w-6\">\n                    <AvatarImage src={expert.avatarUrl} alt={expert.name} />\n                    <AvatarFallback>{expert.name.charAt(0)}</AvatarFallback>\n                  </Avatar>\n                  <span className=\"text-xs\">{expert.name}</span>\n                </TabsTrigger>\n              ))}\n            </TabsList>\n\n            {experts.map((expert) => (\n              <TabsContent key={expert.id} value={expert.id} className=\"mt-0\">\n                <ExpertCard expert={expert} />\n              </TabsContent>\n            ))}\n          </Tabs>\n        </div>\n\n        {/* Expert responses - Desktop */}\n        <div className=\"hidden md:block\">\n          <div className=\"mb-16 grid gap-8\">\n            {experts.map((expert, index) => (\n              <ExpertCard key={expert.id} expert={expert} index={index + 1} />\n            ))}\n          </div>\n        </div>\n\n        {/* Conclusion */}\n        <div className=\"mb-12\">\n          <h2 className=\"mb-6 flex items-center gap-2 text-2xl font-bold\">\n            <BookOpen className=\"text-primary h-5 w-5\" />\n            Key Takeaways\n          </h2>\n          <div className=\"prose prose-lg max-w-none\">\n            <p>{conclusion}</p>\n          </div>\n        </div>\n\n        {/* Call to action */}\n        <div className=\"text-center\">\n          <Button className=\"gap-2\">\n            Subscribe for More Industry Insights\n            <ExternalLink className=\"h-4 w-4\" />\n          </Button>\n        </div>\n      </div>\n    </section>\n  );\n}\n\n// Expert card component\nfunction ExpertCard({ expert, index }: { expert: Expert; index?: number }) {\n  const { name, title, company, avatarUrl, bio, response, socialLinks } =\n    expert;\n\n  return (\n    <Card className=\"overflow-hidden p-0\">\n      <div className=\"md:flex\">\n        {/* Expert info */}\n        <div className=\"bg-muted/30 p-6 md:w-72 md:flex-shrink-0\">\n          <div className=\"mb-4 flex items-start gap-4 md:flex-col\">\n            <Avatar className=\"h-16 w-16\">\n              <AvatarImage src={avatarUrl} alt={name} />\n              <AvatarFallback>{name.charAt(0)}</AvatarFallback>\n            </Avatar>\n            <div>\n              {index && (\n                <Badge variant=\"outline\" className=\"mb-2\">\n                  Expert #{index}\n                </Badge>\n              )}\n              <h3 className=\"text-lg font-bold\">{name}</h3>\n              <p className=\"text-muted-foreground text-sm\">{title}</p>\n              <p className=\"text-muted-foreground text-sm\">{company}</p>\n            </div>\n          </div>\n\n          <p className=\"mb-4 text-sm\">{bio}</p>\n\n          {socialLinks && (\n            <div className=\"flex gap-2\">\n              {socialLinks.twitter && (\n                <Button variant=\"ghost\" size=\"icon\" className=\"h-8 w-8\" asChild>\n                  <a href={socialLinks.twitter}>\n                    <Twitter className=\"h-4 w-4\" />\n                  </a>\n                </Button>\n              )}\n              {socialLinks.linkedin && (\n                <Button variant=\"ghost\" size=\"icon\" className=\"h-8 w-8\" asChild>\n                  <a href={socialLinks.linkedin}>\n                    <Linkedin className=\"h-4 w-4\" />\n                  </a>\n                </Button>\n              )}\n              {socialLinks.website && (\n                <Button variant=\"ghost\" size=\"icon\" className=\"h-8 w-8\" asChild>\n                  <a href={socialLinks.website}>\n                    <ExternalLink className=\"h-4 w-4\" />\n                  </a>\n                </Button>\n              )}\n            </div>\n          )}\n        </div>\n\n        {/* Expert response */}\n        <div className=\"p-6 md:flex-1\">\n          <div className=\"relative mb-6\">\n            <Quote className=\"text-primary/20 absolute -top-2 -left-2 h-8 w-8\" />\n            <div className=\"prose prose-quoteless pt-2 pl-4\">\n              <p className=\"italic\">{response}</p>\n            </div>\n          </div>\n\n          <CardFooter className=\"flex-wrap justify-between gap-4 border-t px-0 pt-4\">\n            <div className=\"flex items-center gap-2\">\n              <Button variant=\"ghost\" size=\"sm\" className=\"h-8 gap-1\">\n                <ThumbsUp className=\"h-4 w-4\" />\n                Helpful\n              </Button>\n              <Button variant=\"ghost\" size=\"sm\" className=\"h-8 gap-1\">\n                <Share2 className=\"h-4 w-4\" />\n                Share\n              </Button>\n            </div>\n\n            <Button variant=\"link\" size=\"sm\" className=\"h-8 p-0\">\n              View more from {name}\n            </Button>\n          </CardFooter>\n        </div>\n      </div>\n    </Card>\n  );\n}\n\n// Basic prose styles\nconst styles = `\n.prose { color: var(--foreground); }\n.prose p { margin-bottom: 1.25em; }\n.prose h1, .prose h2, .prose h3 { color: var(--foreground); margin-bottom: 0.8em; }\n.prose a { color: var(--primary); text-decoration: none; }\n.prose a:hover { text-decoration: underline; }\n.prose-quoteless p { quotes: none; }\n.prose-quoteless p:before, .prose-quoteless p:after { content: none; }\n`;\n\nif (typeof window !== 'undefined') {\n  const styleSheet = document.createElement('style');\n  styleSheet.type = 'text/css';\n  styleSheet.innerText = styles;\n  document.head.appendChild(styleSheet);\n}\n","type":"registry:component","target":"components/blocks/marketing/blog-sections/expert-roundup.tsx"},{"path":"components/ui/button.tsx","content":"import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm 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 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline:\n          \"border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n        destructive:\n          \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5\",\n        lg: \"h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        icon: \"size-9\",\n        \"icon-xs\":\n          \"size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\":\n          \"size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md\",\n        \"icon-lg\": \"size-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n","type":"registry:ui","target":"components/ui/button.tsx"},{"path":"components/ui/badge.tsx","content":"import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n  \"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive:\n          \"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20\",\n        outline:\n          \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"span\"> &\n  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"span\"\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      data-variant={variant}\n      className={cn(badgeVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Badge, badgeVariants }\n","type":"registry:ui","target":"components/ui/badge.tsx"},{"path":"components/ui/card.tsx","content":"import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"group/card flex flex-col gap-6 overflow-hidden rounded-xl bg-card py-6 text-sm text-card-foreground shadow-xs ring-1 ring-foreground/10 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\n        \"font-heading text-base leading-normal font-medium group-data-[size=sm]/card:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-6 group-data-[size=sm]/card:px-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"flex items-center rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n","type":"registry:ui","target":"components/ui/card.tsx"},{"path":"components/ui/tabs.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Tabs as TabsPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Root>) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      className={cn(\n        \"group/tabs flex gap-2 data-horizontal:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-9 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-muted\",\n        line: \"gap-1 bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction TabsList({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List> &\n  VariantProps<typeof tabsListVariants>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      data-variant={variant}\n      className={cn(tabsListVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction TabsTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        \"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent\",\n        \"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground\",\n        \"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return (\n    <TabsPrimitive.Content\n      data-slot=\"tabs-content\"\n      className={cn(\"flex-1 text-sm outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n","type":"registry:ui","target":"components/ui/tabs.tsx"},{"path":"components/ui/brand-icons.tsx","content":"import type { ReactNode, SVGProps } from \"react\"\n\ntype BrandIconProps = SVGProps<SVGSVGElement> & {\n  size?: number | string\n}\n\nfunction BrandSvg({\n  children,\n  size = 24,\n  ...props\n}: BrandIconProps & { children: ReactNode }) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      focusable=\"false\"\n      height={size}\n      viewBox=\"0 0 24 24\"\n      width={size}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      {children}\n    </svg>\n  )\n}\n\nfunction Datadog(props: BrandIconProps) {\n  return (\n    <BrandSvg {...props}>\n      <path fill=\"currentColor\" d=\"M19.57 17.04l-1.997-1.316-1.665 2.782-1.937-.567-1.706 2.604.087.82 9.274-1.71-.538-5.794zm-8.649-2.498l1.488-.204c.241.108.409.15.697.223.45.117.97.23 1.741-.16.18-.088.553-.43.704-.625l6.096-1.106.622 7.527-10.444 1.882zm11.325-2.712l-.602.115L20.488 0 .789 2.285l2.427 19.693 2.306-.334c-.184-.263-.471-.581-.96-.989-.68-.564-.44-1.522-.039-2.127.53-1.022 3.26-2.322 3.106-3.956-.056-.594-.15-1.368-.702-1.898-.02.22.017.432.017.432s-.227-.289-.34-.683c-.112-.15-.2-.199-.319-.4-.085.233-.073.503-.073.503s-.186-.437-.216-.807c-.11.166-.137.48-.137.48s-.241-.69-.186-1.062c-.11-.323-.436-.965-.343-2.424.6.421 1.924.321 2.44-.439.171-.251.288-.939-.086-2.293-.24-.868-.835-2.16-1.066-2.651l-.028.02c.122.395.374 1.223.47 1.625.293 1.218.372 1.642.234 2.204-.116.488-.397.808-1.107 1.165-.71.358-1.653-.514-1.713-.562-.69-.55-1.224-1.447-1.284-1.883-.062-.477.275-.763.445-1.153-.243.07-.514.192-.514.192s.323-.334.722-.624c.165-.109.262-.178.436-.323a9.762 9.762 0 0 0-.456.003s.42-.227.855-.392c-.318-.014-.623-.003-.623-.003s.937-.419 1.678-.727c.509-.208 1.006-.147 1.286.257.367.53.752.817 1.569.996.501-.223.653-.337 1.284-.509.554-.61.99-.688.99-.688s-.216.198-.274.51c.314-.249.66-.455.66-.455s-.134.164-.259.426l.03.043c.366-.22.797-.394.797-.394s-.123.156-.268.358c.277-.002.838.012 1.056.037 1.285.028 1.552-1.374 2.045-1.55.618-.22.894-.353 1.947.68.903.888 1.609 2.477 1.259 2.833-.294.295-.874-.115-1.516-.916a3.466 3.466 0 0 1-.716-1.562 1.533 1.533 0 0 0-.497-.85s.23.51.23.96c0 .246.03 1.165.424 1.68-.039.076-.057.374-.1.43-.458-.554-1.443-.95-1.604-1.067.544.445 1.793 1.468 2.273 2.449.453.927.186 1.777.416 1.997.065.063.976 1.197 1.15 1.767.306.994.019 2.038-.381 2.685l-1.117.174c-.163-.045-.273-.068-.42-.153.08-.143.241-.5.243-.572l-.063-.111c-.348.492-.93.97-1.414 1.245-.633.359-1.363.304-1.838.156-1.348-.415-2.623-1.327-2.93-1.566 0 0-.01.191.048.234.34.383 1.119 1.077 1.872 1.56l-1.605.177.759 5.908c-.337.048-.39.071-.757.124-.325-1.147-.946-1.895-1.624-2.332-.599-.384-1.424-.47-2.214-.314l-.05.059a2.851 2.851 0 0 1 1.863.444c.654.413 1.181 1.481 1.375 2.124.248.822.42 1.7-.248 2.632-.476.662-1.864 1.028-2.986.237.3.481.705.876 1.25.95.809.11 1.577-.03 2.106-.574.452-.464.69-1.434.628-2.456l.714-.104.258 1.834 11.827-1.424zM15.05 6.848c-.034.075-.085.125-.007.37l.004.014.013.032.032.073c.14.287.295.558.552.696.067-.011.136-.019.207-.023.242-.01.395.028.492.08.009-.048.01-.119.005-.222-.018-.364.072-.982-.626-1.308-.264-.122-.634-.084-.757.068a.302.302 0 0 1 .058.013c.186.066.06.13.027.207m1.958 3.392c-.092-.05-.52-.03-.821.005-.574.068-1.193.267-1.328.372-.247.191-.135.523.047.66.511.382.96.638 1.432.575.29-.038.546-.497.728-.914.124-.288.124-.598-.058-.698m-5.077-2.942c.162-.154-.805-.355-1.556.156-.554.378-.571 1.187-.041 1.646.053.046.096.078.137.104a4.77 4.77 0 0 1 1.396-.412c.113-.125.243-.345.21-.745-.044-.542-.455-.456-.146-.749\" />\n    </BrandSvg>\n  )\n}\n\nfunction Facebook(props: BrandIconProps) {\n  return (\n    <BrandSvg {...props}>\n      <path fill=\"currentColor\" d=\"M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z\" />\n    </BrandSvg>\n  )\n}\n\nfunction Figma(props: BrandIconProps) {\n  return (\n    <BrandSvg {...props}>\n      <path fill=\"currentColor\" d=\"M15.852 8.981h-4.588V0h4.588c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.491-4.49 4.491zM12.735 7.51h3.117c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019h-3.117V7.51zm0 1.471H8.148c-2.476 0-4.49-2.014-4.49-4.49S5.672 0 8.148 0h4.588v8.981zm-4.587-7.51c-1.665 0-3.019 1.355-3.019 3.019s1.354 3.02 3.019 3.02h3.117V1.471H8.148zm4.587 15.019H8.148c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h4.588v8.98zM8.148 8.981c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h3.117V8.981H8.148zM8.172 24c-2.489 0-4.515-2.014-4.515-4.49s2.014-4.49 4.49-4.49h4.588v4.441c0 2.503-2.047 4.539-4.563 4.539zm-.024-7.51a3.023 3.023 0 0 0-3.019 3.019c0 1.665 1.365 3.019 3.044 3.019 1.705 0 3.093-1.376 3.093-3.068v-2.97H8.148zm7.704 0h-.098c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h.098c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.49-4.49 4.49zm-.097-7.509c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h.098c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019h-.098z\" />\n    </BrandSvg>\n  )\n}\n\nfunction Github(props: BrandIconProps) {\n  return (\n    <BrandSvg {...props}>\n      <path fill=\"currentColor\" d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\" />\n    </BrandSvg>\n  )\n}\n\nfunction Google(props: BrandIconProps) {\n  return (\n    <BrandSvg {...props}>\n      <path fill=\"currentColor\" 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\" />\n    </BrandSvg>\n  )\n}\n\nfunction Instagram(props: BrandIconProps) {\n  return (\n    <BrandSvg {...props}>\n      <path fill=\"currentColor\" d=\"M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077\" />\n    </BrandSvg>\n  )\n}\n\nfunction Jira(props: BrandIconProps) {\n  return (\n    <BrandSvg {...props}>\n      <path fill=\"currentColor\" d=\"M11.571 11.513H0a5.218 5.218 0 0 0 5.232 5.215h2.13v2.057A5.215 5.215 0 0 0 12.575 24V12.518a1.005 1.005 0 0 0-1.005-1.005zm5.723-5.756H5.736a5.215 5.215 0 0 0 5.215 5.214h2.129v2.058a5.218 5.218 0 0 0 5.215 5.214V6.758a1.001 1.001 0 0 0-1.001-1.001zM23.013 0H11.455a5.215 5.215 0 0 0 5.215 5.215h2.129v2.057A5.215 5.215 0 0 0 24 12.483V1.005A1.001 1.001 0 0 0 23.013 0Z\" />\n    </BrandSvg>\n  )\n}\n\nfunction Linear(props: BrandIconProps) {\n  return (\n    <BrandSvg {...props}>\n      <path fill=\"currentColor\" d=\"M2.886 4.18A11.982 11.982 0 0 1 11.99 0C18.624 0 24 5.376 24 12.009c0 3.64-1.62 6.903-4.18 9.105L2.887 4.18ZM1.817 5.626l16.556 16.556c-.524.33-1.075.62-1.65.866L.951 7.277c.247-.575.537-1.126.866-1.65ZM.322 9.163l14.515 14.515c-.71.172-1.443.282-2.195.322L0 11.358a12 12 0 0 1 .322-2.195Zm-.17 4.862 9.823 9.824a12.02 12.02 0 0 1-9.824-9.824Z\" />\n    </BrandSvg>\n  )\n}\n\nfunction Linkedin(props: BrandIconProps) {\n  return (\n    <BrandSvg {...props}>\n      <path fill=\"currentColor\" d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z\" />\n    </BrandSvg>\n  )\n}\n\nfunction Loom(props: BrandIconProps) {\n  return (\n    <BrandSvg {...props}>\n      <path fill=\"currentColor\" d=\"M24 10.665h-7.018l6.078-3.509-1.335-2.312-6.078 3.509 3.508-6.077L16.843.94l-3.508 6.077V0h-2.67v7.018L7.156.94 4.844 2.275l3.509 6.077-6.078-3.508L.94 7.156l6.078 3.509H0v2.67h7.017L.94 16.844l1.335 2.313 6.077-3.508-3.509 6.077 2.312 1.335 3.509-6.078V24h2.67v-7.017l3.508 6.077 2.312-1.335-3.509-6.078 6.078 3.509 1.335-2.313-6.077-3.508h7.017v-2.67H24zm-12 4.966a3.645 3.645 0 1 1 0-7.29 3.645 3.645 0 0 1 0 7.29z\" />\n    </BrandSvg>\n  )\n}\n\nfunction Notion(props: BrandIconProps) {\n  return (\n    <BrandSvg {...props}>\n      <path fill=\"currentColor\" d=\"M4.459 4.208c.746.606 1.026.56 2.428.466l13.215-.793c.28 0 .047-.28-.046-.326L17.86 1.968c-.42-.326-.981-.7-2.055-.607L3.01 2.295c-.466.046-.56.28-.374.466zm.793 3.08v13.904c0 .747.373 1.027 1.214.98l14.523-.84c.841-.046.935-.56.935-1.167V6.354c0-.606-.233-.933-.748-.887l-15.177.887c-.56.047-.747.327-.747.933zm14.337.745c.093.42 0 .84-.42.888l-.7.14v10.264c-.608.327-1.168.514-1.635.514-.748 0-.935-.234-1.495-.933l-4.577-7.186v6.952L12.21 19s0 .84-1.168.84l-3.222.186c-.093-.186 0-.653.327-.746l.84-.233V9.854L7.822 9.76c-.094-.42.14-1.026.793-1.073l3.456-.233 4.764 7.279v-6.44l-1.215-.139c-.093-.514.28-.887.747-.933zM1.936 1.035l13.31-.98c1.634-.14 2.055-.047 3.082.7l4.249 2.986c.7.513.934.653.934 1.213v16.378c0 1.026-.373 1.634-1.68 1.726l-15.458.934c-.98.047-1.448-.093-1.962-.747l-3.129-4.06c-.56-.747-.793-1.306-.793-1.96V2.667c0-.839.374-1.54 1.447-1.632z\" />\n    </BrandSvg>\n  )\n}\n\nfunction Sentry(props: BrandIconProps) {\n  return (\n    <BrandSvg {...props}>\n      <path fill=\"currentColor\" d=\"M13.91 2.505c-.873-1.448-2.972-1.448-3.844 0L6.904 7.92a15.478 15.478 0 0 1 8.53 12.811h-2.221A13.301 13.301 0 0 0 5.784 9.814l-2.926 5.06a7.65 7.65 0 0 1 4.435 5.848H2.194a.365.365 0 0 1-.298-.534l1.413-2.402a5.16 5.16 0 0 0-1.614-.913L.296 19.275a2.182 2.182 0 0 0 .812 2.999 2.24 2.24 0 0 0 1.086.288h6.983a9.322 9.322 0 0 0-3.845-8.318l1.11-1.922a11.47 11.47 0 0 1 4.95 10.24h5.915a17.242 17.242 0 0 0-7.885-15.28l2.244-3.845a.37.37 0 0 1 .504-.13c.255.14 9.75 16.708 9.928 16.9a.365.365 0 0 1-.327.543h-2.287c.029.612.029 1.223 0 1.831h2.297a2.206 2.206 0 0 0 1.922-3.31z\" />\n    </BrandSvg>\n  )\n}\n\nfunction Slack(props: BrandIconProps) {\n  return (\n    <BrandSvg {...props}>\n      <path fill=\"currentColor\" d=\"M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z\" />\n    </BrandSvg>\n  )\n}\n\nfunction Stripe(props: BrandIconProps) {\n  return (\n    <BrandSvg {...props}>\n      <path fill=\"currentColor\" d=\"M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409 0-.831.683-1.305 1.901-1.305 2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.975 15.697 0 12.165 0 9.667 0 7.589.654 6.104 1.872 4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219 2.585.92 3.445 1.574 3.445 2.583 0 .98-.84 1.545-2.354 1.545-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C5.175 22.99 8.385 24 11.714 24c2.641 0 4.843-.624 6.328-1.813 1.664-1.305 2.525-3.236 2.525-5.732 0-4.128-2.524-5.851-6.594-7.305h.003z\" />\n    </BrandSvg>\n  )\n}\n\nfunction Supabase(props: BrandIconProps) {\n  return (\n    <BrandSvg {...props}>\n      <path fill=\"currentColor\" d=\"M11.9 1.036c-.015-.986-1.26-1.41-1.874-.637L.764 12.05C-.33 13.427.65 15.455 2.409 15.455h9.579l.113 7.51c.014.985 1.259 1.408 1.873.636l9.262-11.653c1.093-1.375.113-3.403-1.645-3.403h-9.642z\" />\n    </BrandSvg>\n  )\n}\n\nfunction Twitter(props: BrandIconProps) {\n  return (\n    <BrandSvg {...props}>\n      <path fill=\"currentColor\" d=\"M23.4 4.8c-.8.4-1.7.6-2.6.7.9-.6 1.6-1.5 2-2.5-.9.5-1.9.9-2.9 1.1a4.5 4.5 0 0 0-7.8 4.1A12.8 12.8 0 0 1 2.8 3.5a4.5 4.5 0 0 0 1.4 6.1c-.7 0-1.4-.2-2-.6v.1c0 2.2 1.6 4.1 3.6 4.5-.4.1-.8.2-1.2.2-.3 0-.6 0-.9-.1.6 1.8 2.2 3.1 4.2 3.1a9.1 9.1 0 0 1-5.6 1.9c-.4 0-.7 0-1.1-.1a12.8 12.8 0 0 0 7 2c8.3 0 12.9-6.9 12.9-12.9v-.6c.9-.6 1.7-1.4 2.3-2.3Z\" />\n    </BrandSvg>\n  )\n}\n\nfunction Vercel(props: BrandIconProps) {\n  return (\n    <BrandSvg {...props}>\n      <path fill=\"currentColor\" d=\"m12 1.608 12 20.784H0Z\" />\n    </BrandSvg>\n  )\n}\n\nfunction X(props: BrandIconProps) {\n  return (\n    <BrandSvg {...props}>\n      <path fill=\"currentColor\" d=\"M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z\" />\n    </BrandSvg>\n  )\n}\n\nfunction Youtube(props: BrandIconProps) {\n  return (\n    <BrandSvg {...props}>\n      <path fill=\"currentColor\" d=\"M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z\" />\n    </BrandSvg>\n  )\n}\n\nconst DatadogIcon = Datadog\nconst FacebookIcon = Facebook\nconst FigmaIcon = Figma\nconst GoogleIcon = Google\nconst JiraIcon = Jira\nconst LinearIcon = Linear\nconst LoomIcon = Loom\nconst NotionIcon = Notion\nconst SentryIcon = Sentry\nconst SlackIcon = Slack\nconst StripeIcon = Stripe\nconst SupabaseIcon = Supabase\nconst VercelIcon = Vercel\nconst GithubIcon = Github\nconst GitHub = Github\nconst GitHubIcon = Github\nconst InstagramIcon = Instagram\nconst LinkedinIcon = Linkedin\nconst LinkedIn = Linkedin\nconst LinkedInIcon = Linkedin\nconst TwitterIcon = Twitter\nconst XIcon = X\nconst YoutubeIcon = Youtube\nconst YouTube = Youtube\nconst YouTubeIcon = Youtube\n\nexport {\n  Datadog,\n  DatadogIcon,\n  Facebook,\n  FacebookIcon,\n  Figma,\n  FigmaIcon,\n  Github,\n  GitHub,\n  GithubIcon,\n  GitHubIcon,\n  Google,\n  GoogleIcon,\n  Instagram,\n  InstagramIcon,\n  Jira,\n  JiraIcon,\n  Linear,\n  LinearIcon,\n  Linkedin,\n  LinkedIn,\n  LinkedinIcon,\n  LinkedInIcon,\n  Loom,\n  LoomIcon,\n  Notion,\n  NotionIcon,\n  Sentry,\n  SentryIcon,\n  Slack,\n  SlackIcon,\n  Stripe,\n  StripeIcon,\n  Supabase,\n  SupabaseIcon,\n  Twitter,\n  TwitterIcon,\n  Vercel,\n  VercelIcon,\n  X,\n  XIcon,\n  Youtube,\n  YouTube,\n  YoutubeIcon,\n  YouTubeIcon,\n}\n","type":"registry:ui","target":"components/ui/brand-icons.tsx"},{"path":"components/ui/avatar.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Avatar({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Root> & {\n  size?: \"default\" | \"sm\" | \"lg\"\n}) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      className={cn(\n        \"group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarImage({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(\n        \"aspect-square size-full rounded-full object-cover\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"avatar-badge\"\n      className={cn(\n        \"absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none\",\n        \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n        \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n        \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      className={cn(\n        \"group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroupCount({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        \"relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarBadge,\n}\n","type":"registry:ui","target":"components/ui/avatar.tsx"}],"description":"A grid collecting quotes and headshots from several contributors. Use it to package an opinion roundup or panel feature into one shareable post.","dependencies":["class-variance-authority","lucide-react","radix-ui"]}