{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"portfolio-portfolio-blog-writing-and-previews-masonry-layout-articles","type":"registry:block","title":"Masonry Layout Articles","files":[{"path":"components/blocks/portfolio/portfolio-blog-writing-and-previews/masonry-layout-articles.tsx","content":"import { useEffect, useRef } from 'react';\n\nimport { cn } from '@/lib/utils';\nimport { Button } from '@/components/ui/button';\nimport { Card } from '@/components/ui/card';\n\nexport default function MasonryLayoutArticles() {\n // Sample blog posts data\n const posts = [\n {\n id: '1',\n title: 'Creating Accessible Web Applications with React and ARIA',\n excerpt:\n 'Learn how to build web applications that are accessible to everyone using React best practices and ARIA attributes.',\n date: 'Apr 15, 2023',\n category: 'Development',\n imageUrl:\n 'https://images.unsplash.com/photo-1593720213428-28a5b9e94613?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n slug: 'creating-accessible-web-applications',\n height: 'medium' as const,\n },\n {\n id: '2',\n title: 'The Future of Design Systems in 2023',\n excerpt:\n 'Explore the trends and innovations shaping design systems and component libraries this year.',\n date: 'Mar 28, 2023',\n category: 'Design',\n imageUrl:\n 'https://images.unsplash.com/photo-1561070791-2526d30994b5?q=80&w=2000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n slug: 'future-of-design-systems',\n height: 'tall' as const,\n },\n {\n id: '3',\n title: 'Optimizing Performance in Next.js Applications',\n excerpt:\n 'Practical strategies to improve loading times and overall performance in your Next.js web applications.',\n date: 'Mar 12, 2023',\n category: 'Performance',\n imageUrl:\n 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=2015&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n slug: 'optimizing-nextjs-performance',\n height: 'short' as const,\n },\n {\n id: '4',\n title: 'Crafting Effective User Onboarding Experiences',\n excerpt:\n 'How to design user onboarding that reduces friction and increases conversion rates for your product.',\n date: 'Feb 24, 2023',\n category: 'UX Design',\n imageUrl:\n 'https://images.unsplash.com/photo-1559028012-481c04fa702d?q=80&w=2036&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n slug: 'effective-user-onboarding',\n height: 'medium' as const,\n },\n {\n id: '5',\n title: 'Building a Design Portfolio That Stands Out',\n excerpt:\n 'Tips and strategies for creating a portfolio that showcases your best work and attracts clients.',\n date: 'Feb 10, 2023',\n category: 'Career',\n imageUrl:\n 'https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n slug: 'design-portfolio-tips',\n height: 'tall' as const,\n },\n {\n id: '6',\n title: 'Responsive Design in the Age of Foldable Devices',\n excerpt:\n 'How to adapt your responsive design strategies for the emerging market of foldable and dual-screen devices.',\n date: 'Jan 28, 2023',\n category: 'Design',\n imageUrl:\n 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n slug: 'responsive-design-foldable-devices',\n height: 'short' as const,\n },\n ];\n\n const title = 'Writing Portfolio';\n const description =\n 'A collection of articles, case studies, and thoughts on design and development';\n\n const masonryRef = useRef(null);\n\n // This effect initializes the masonry layout using CSS columns\n // The real masonry layout would be controlled by the height values from the posts\n useEffect(() => {\n const resizeObserver = new ResizeObserver(() => {\n if (masonryRef.current) {\n // Could implement a more sophisticated layout algorithm here if needed\n }\n });\n\n if (masonryRef.current) {\n resizeObserver.observe(masonryRef.current);\n }\n\n return () => {\n if (masonryRef.current) {\n resizeObserver.unobserve(masonryRef.current);\n }\n };\n }, []);\n\n return (\n
\n
\n
\n
\n

{title}

\n

{description}

\n
\n\n \n {posts.map((post) => {\n // Calculate card height based on post.height or randomize for demo\n const aspectRatio =\n post.height === 'tall'\n ? 'aspect-[3/4]'\n : post.height === 'medium'\n ? 'aspect-[4/3]'\n : 'aspect-square';\n\n return (\n \n \n \n \n
\n
\n
\n {post.date}\n •\n {post.category}\n
\n

\n {post.title}\n

\n

\n {post.excerpt}\n

\n
\n
\n \n \n );\n })}\n
\n\n
\n \n
\n
\n \n
\n );\n}\n","type":"registry:component","target":"components/blocks/portfolio/portfolio-blog-writing-and-previews/masonry-layout-articles.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 & {\n asChild?: boolean\n }) {\n const Comp = asChild ? Slot.Root : \"button\"\n\n return (\n \n )\n}\n\nexport { Button, buttonVariants }\n","type":"registry:ui","target":"components/ui/button.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 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 \n )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\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"}],"description":"A masonry grid of article cards with varied heights for a dynamic feel. Fits posts that mix tall images with short text on a writing showcase.","dependencies":["class-variance-authority","radix-ui"]}