Before & After — Side by Side

Installation

Variants

Files installed (1)

• components/blocks/BeforeAfterSideBySide.tsx3.6 kB

  Copy

  'use client'
  
  import { Badge } from '@/components/ui/badge'
  import { Button } from '@/components/ui/button'
  import { Card, CardContent } from '@/components/ui/card'
  import { Separator } from '@/components/ui/separator'
  
  const panels = [
    {
      label: 'Before',
      caption: 'Four exports reconciled by hand',
      rows: [
        { text: 'revenue_q1_final_v3.xlsx', note: '1' },
        { text: 'revenue_q1_FINAL_v3b.xlsx', note: '1' },
        { text: 'refunds_manual_adj.csv', note: '2' },
        { text: 'fx_rates_pasted.csv', note: '3' },
      ],
    },
    {
      label: 'After',
      caption: 'One certified definition',
      rows: [
        { text: 'metrics/revenue_net.yml', note: '1' },
        { text: '  joins: refunds, fx_rates', note: '2' },
        { text: '  owner: finance-analytics', note: '3' },
        { text: '  reconciled: 4 quarters', note: '' },
      ],
    },
  ]
  
  const annotations = [
    { id: '1', text: 'Two files claiming to be final, differing by 40k in net revenue.' },
    { id: '2', text: 'Refund adjustments applied by hand, with no record of who applied them.' },
    { id: '3', text: 'FX rates pasted from a second system on a date nobody logged.' },
  ]
  
  export function BeforeAfterSideBySide() {
    return (
      <section data-slot="before-after-side-by-side" className="bg-background">
        <div className="mx-auto max-w-5xl px-6 py-20 lg:py-28">
          <Badge variant="secondary">Before and after</Badge>
          <h2 className="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">The same close, two quarters apart</h2>
  
          {/* items-stretch so both panels share a height; a slider would hide one
              side at a time and make the annotations unreadable. */}
          <div className="mt-10 grid items-stretch gap-4 md:grid-cols-2">
            {panels.map((panel) => (
              <Card key={panel.label}>
                <CardContent className="flex h-full flex-col p-0">
                  <div className="border-border flex items-center justify-between gap-3 border-b px-4 py-2.5">
                    <span className="text-sm font-semibold">{panel.label}</span>
                    <span className="text-muted-foreground text-xs">{panel.caption}</span>
                  </div>
                  <ul className="flex-1 space-y-2 p-4">
                    {panel.rows.map((row) => (
                      <li key={row.text} className="flex items-start gap-2">
                        {row.note ? (
                          <span className="border-border text-muted-foreground mt-px flex size-4 shrink-0 items-center justify-center rounded-full border font-mono text-xs">
                            {row.note}
                          </span>
                        ) : (
                          <span className="size-4 shrink-0" aria-hidden="true" />
                        )}
                        <span className="min-w-0 font-mono text-xs break-all">{row.text}</span>
                      </li>
                    ))}
                  </ul>
                </CardContent>
              </Card>
            ))}
          </div>
  
          <Separator className="my-8" />
  
          <ol className="space-y-3">
            {annotations.map((annotation) => (
              <li key={annotation.id} className="flex items-start gap-3 text-sm">
                <span className="border-border text-muted-foreground mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full border font-mono text-xs">
                  {annotation.id}
                </span>
                <span className="text-muted-foreground leading-relaxed">{annotation.text}</span>
              </li>
            ))}
          </ol>
  
          <Button className="mt-8">Read the full case study</Button>
        </div>
      </section>
    )
  }
  

Raw manifest:https://uipkge.dev/r/react/before-after-side-by-side.json