Dividend Income
Quarterly dividend income with mini charts
Q2 Dividend Income
Quarterly dividend payouts across your portfolio holdings.
Vanguard VIG
450 Shares
S&P 500 VOO
112 Shares
Apple AAPL
85 Shares
Realty Income
320 Shares
"use client"import { Bar, BarChart, XAxis } from "recharts"import { Button } from "@/components/ui/button"import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle,} from "@/components/ui/card"import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig,} from "@/components/ui/chart"import { Item, ItemContent, ItemDescription, ItemGroup, ItemTitle,} from "@/components/ui/item"import { IconPlaceholder } from "@/components/icon-placeholder"const HOLDINGS = [ { name: "Vanguard VIG", shares: "450 Shares", amount: "$1,842.10", data: [ { q: "Q1", value: 380 }, { q: "Q2", value: 420 }, { q: "Q3", value: 390 }, { q: "Q4", value: 652 }, ], }, { name: "S&P 500 VOO", shares: "112 Shares", amount: "$928.40", data: [ { q: "Q1", value: 180 }, { q: "Q2", value: 210 }, { q: "Q3", value: 320 }, { q: "Q4", value: 218 }, ], }, { name: "Apple AAPL", shares: "85 Shares", amount: "$340.00", data: [ { q: "Q1", value: 60 }, { q: "Q2", value: 70 }, { q: "Q3", value: 120 }, { q: "Q4", value: 90 }, ], }, { name: "Realty Income", shares: "320 Shares", amount: "$1,139.50", data: [ { q: "Q1", value: 240 }, { q: "Q2", value: 260 }, { q: "Q3", value: 280 }, { q: "Q4", value: 360 }, ], },]const miniChartConfig = { value: { label: "Dividend", color: "var(--chart-2)", },} satisfies ChartConfigexport function DividendIncome() { return ( <Card> <CardHeader> <CardTitle>Q2 Dividend Income</CardTitle> <CardDescription> Quarterly dividend payouts across your portfolio holdings. </CardDescription> <CardAction> <Button variant="ghost" size="icon-sm" className="bg-muted"> <IconPlaceholder lucide="XIcon" tabler="IconX" hugeicons="Cancel01Icon" phosphor="XIcon" remixicon="RiCloseLine" /> </Button> </CardAction> </CardHeader> <CardContent> <ItemGroup> {HOLDINGS.map((holding) => ( <Item key={holding.name} variant="muted"> <ItemContent> <ItemTitle>{holding.name}</ItemTitle> <ItemDescription> {holding.shares} </ItemDescription> </ItemContent> <ChartContainer config={miniChartConfig} className="hidden h-8 w-24 md:block" > <BarChart data={holding.data} margin={{ top: 0, right: 0, bottom: 0, left: 0, }} > <ChartTooltip cursor={false} content={ <ChartTooltipContent hideLabel /> } /> <Bar dataKey="value" fill="var(--color-value)" radius={[3, 3, 0, 0]} /> </BarChart> </ChartContainer> <span className="hidden text-sm font-semibold tabular-nums md:block"> {holding.amount} </span> </Item> ))} </ItemGroup> </CardContent> </Card> )}