snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)

apps/v4/registry/bases/base/blocks/preview-02/cards/upcoming-payments.tsx

@@ -0,0 +1,69 @@
+"use client"
+
+import * as React from "react"
+
+import { Badge } from "@/registry/bases/base/ui/badge"
+import { Calendar } from "@/registry/bases/base/ui/calendar"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/base/ui/card"
+import {
+  Item,
+  ItemContent,
+  ItemDescription,
+  ItemGroup,
+  ItemMedia,
+  ItemTitle,
+} from "@/registry/bases/base/ui/item"
+
+export function UpcomingPayments() {
+  const [date, setDate] = React.useState<Date | undefined>(new Date())
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Upcoming Payments</CardTitle>
+        <CardDescription>
+          Select a date to view scheduled payments.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        <Item variant="outline" className="justify-center">
+          <Calendar
+            mode="single"
+            selected={date}
+            onSelect={setDate}
+            className="w-full [--cell-size:--spacing(8)] md:[--cell-size:--spacing(10)] style-sera:md:[--cell-size:--spacing(9)]"
+          />
+        </Item>
+        <ItemGroup className="w-full">
+          <Item variant="muted">
+            <ItemContent>
+              <ItemTitle>Netflix Subscription</ItemTitle>
+              <ItemDescription>Apr 15, 2024</ItemDescription>
+            </ItemContent>
+            <Badge variant="secondary">$19.99</Badge>
+          </Item>
+          <Item variant="muted">
+            <ItemContent>
+              <ItemTitle>Rent Payment</ItemTitle>
+              <ItemDescription>Apr 1, 2024</ItemDescription>
+            </ItemContent>
+            <Badge variant="secondary">$2,400.00</Badge>
+          </Item>
+          <Item variant="muted">
+            <ItemContent>
+              <ItemTitle>Auto Insurance</ItemTitle>
+              <ItemDescription>Apr 22, 2024</ItemDescription>
+            </ItemContent>
+            <Badge variant="secondary">$186.00</Badge>
+          </Item>
+        </ItemGroup>
+      </CardContent>
+    </Card>
+  )
+}