4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:T2981,import * as React from 'react'; import { Badge } from '@/components/ui/badge'; import { Card, CardContent } from '@/components/ui/card'; import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from '@/components/ui/accordion'; import { cn } from '@/lib/utils'; interface ChangelogItem { version: string; date: string; isLatest: boolean; changes: { type: 'feature' | 'improvement' | 'bugfix' | 'breaking'; description: string; }[]; } interface TimeGroup { year: number; quarters: { quarter: number; releases: ChangelogItem[]; }[]; } export default function GroupedChangelog() { // Sample data const changelogData: ChangelogItem[] = [ { version: '2.0.0', date: '2023-04-15', isLatest: true, changes: [ { type: 'feature', description: 'Completely redesigned dashboard interface', }, { type: 'feature', description: 'Added dark mode support across all pages', }, { type: 'improvement', description: 'Improved performance by 40%' }, { type: 'bugfix', description: 'Fixed multiple accessibility issues' }, { type: 'breaking', description: 'API endpoints restructured for v2', }, ], }, { version: '1.9.0', date: '2023-02-10', isLatest: false, changes: [ { type: 'feature', description: 'Added export to PDF functionality' }, { type: 'improvement', description: 'Enhanced search performance' }, { type: 'bugfix', description: 'Fixed login issues on Safari' }, ], }, { version: '1.8.5', date: '2022-12-07', isLatest: false, changes: [ { type: 'improvement', description: 'Year-end performance optimizations', }, { type: 'bugfix', description: 'Fixed data visualization issues' }, ], }, { version: '1.8.0', date: '2022-10-20', isLatest: false, changes: [ { type: 'feature', description: 'New data visualization options' }, { type: 'feature', description: 'Added team collaboration features' }, { type: 'improvement', description: 'Updated documentation' }, ], }, { version: '1.7.0', date: '2022-08-05', isLatest: false, changes: [ { type: 'feature', description: 'Added user roles and permissions' }, { type: 'bugfix', description: 'Fixed several UI glitches' }, ], }, { version: '1.6.0', date: '2022-05-12', isLatest: false, changes: [ { type: 'feature', description: 'Integrated third-party API services' }, { type: 'improvement', description: 'Enhanced mobile experience' }, ], }, { version: '1.5.0', date: '2022-02-28', isLatest: false, changes: [ { type: 'feature', description: 'Added custom report builder' }, { type: 'improvement', description: 'Improved data loading times' }, ], }, { version: '1.4.0', date: '2021-11-18', isLatest: false, changes: [ { type: 'feature', description: 'Added multi-language support' }, { type: 'bugfix', description: 'Fixed account settings issues' }, ], }, ]; // Group data by year and quarter const groupedData: TimeGroup[] = React.useMemo(() => { const groups: Record = {}; changelogData.forEach((item) => { const date = new Date(item.date); const year = date.getFullYear(); const quarter = Math.floor(date.getMonth() / 3) + 1; if (!groups[year]) { groups[year] = { year, quarters: [] }; } let quarterGroup = groups[year].quarters.find( (q) => q.quarter === quarter ); if (!quarterGroup) { quarterGroup = { quarter, releases: [] }; groups[year].quarters.push(quarterGroup); } quarterGroup.releases.push(item); }); // Sort quarters in descending order Object.values(groups).forEach((yearGroup) => { yearGroup.quarters.sort((a, b) => b.quarter - a.quarter); yearGroup.quarters.forEach((quarter) => { quarter.releases.sort( (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime() ); }); }); // Sort years in descending order return Object.values(groups).sort((a, b) => b.year - a.year); }, [changelogData]); // Get quarterly name const getQuarterName = (quarter: number) => { return `Q${quarter}`; }; // Format date for display const formatDate = (dateString: string) => { const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'long', day: 'numeric', }; return new Date(dateString).toLocaleDateString('en-US', options); }; // Change type styling const getChangeTypeStyles = (type: string) => { switch (type) { case 'feature': return 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400 border-transparent'; case 'improvement': return 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400 border-transparent'; case 'bugfix': return 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400 border-transparent'; case 'breaking': return 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400 border-transparent'; default: return 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200 border-transparent'; } }; // Get change type label const getChangeTypeLabel = (type: string) => { switch (type) { case 'feature': return 'New'; case 'improvement': return 'Improved'; case 'bugfix': return 'Fixed'; case 'breaking': return 'Breaking'; default: return type; } }; return (

Changelog

History of changes organized by year and quarter

{groupedData.map((yearGroup) => ( {yearGroup.year}

{yearGroup.quarters.map((quarter) => (

{yearGroup.year} {getQuarterName(quarter.quarter)}

{quarter.releases.map((release) => (

v{release.version}

{release.isLatest && ( Latest )}

{formatDate(release.date)}

{getChangeTypeLabel(change.type)} {change.description}

))}

); } 53:T749,import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { Slot } from "radix-ui" import { cn } from "@/lib/utils" const badgeVariants = cva( "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!", { variants: { variant: { default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80", secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80", destructive: "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", outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground", ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50", link: "text-primary underline-offset-4 hover:underline", }, }, defaultVariants: { variant: "default", }, } ) function Badge({ className, variant = "default", asChild = false, ...props }: React.ComponentProps<"span"> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot.Root : "span" return ( ) } export { Badge, badgeVariants } 54:Ta35,import * as React from "react" import { cn } from "@/lib/utils" function Card({ className, size = "default", ...props }: React.ComponentProps<"div"> & { size?: "default" | "sm" }) { return (

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", className )} {...props} /> ) } function CardHeader({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardTitle({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardDescription({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardAction({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardContent({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardFooter({ className, ...props }: React.ComponentProps<"div">) { return (

) } export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, } 55:Ta54,"use client" import * as React from "react" import { Accordion as AccordionPrimitive } from "radix-ui" import { cn } from "@/lib/utils" import { ChevronDownIcon, ChevronUpIcon } from "lucide-react" function Accordion({ className, ...props }: React.ComponentProps) { return ( ) } function AccordionItem({ className, ...props }: React.ComponentProps) { return ( ) } function AccordionTrigger({ className, children, ...props }: React.ComponentProps) { return ( {children} ) } function AccordionContent({ className, children, ...props }: React.ComponentProps) { return (

{children}

) } export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","class-variance-authority",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"class-variance-authority"}]]}]}],["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","radix-ui",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"radix-ui"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":[]}]]}],["$","$L50",null,{"sourceUrl":"https://www.shadcn-ui-blocks.com/r/marketing-changelogs-grouped-changelog.json","proxyUrl":"https://shadcnregistry.com/r/shadcn-ui-blocks/marketing-changelogs-grouped-changelog","itemId":"@shadcn-ui-blocks/marketing-changelogs-grouped-changelog"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"components/blocks/marketing/changelogs/grouped-changelog.tsx","content":"$52","type":"registry:component","target":"components/blocks/marketing/changelogs/grouped-changelog.tsx"},{"path":"components/ui/badge.tsx","content":"$53","type":"registry:ui","target":"components/ui/badge.tsx"},{"path":"components/ui/card.tsx","content":"$54","type":"registry:ui","target":"components/ui/card.tsx"},{"path":"components/ui/accordion.tsx","content":"$55","type":"registry:ui","target":"components/ui/accordion.tsx"}]}]]}],"$L56"]}]

Grouped Changelog

Installation

Files

components

Styles