main
parent
726d1f9ac3
commit
5aaf59fab9
@ -0,0 +1,60 @@ |
||||
'use client'; |
||||
|
||||
import { Button } from '@/components/ui/button'; |
||||
import { |
||||
Card, |
||||
CardAction, |
||||
CardContent, |
||||
CardDescription, |
||||
CardFooter, |
||||
CardHeader, |
||||
CardTitle, |
||||
} from '@/components/ui/card'; |
||||
import { Input } from '@/components/ui/input'; |
||||
import { Label } from '@/components/ui/label'; |
||||
|
||||
export default function CardPage() { |
||||
return ( |
||||
<div className="spce-y-6 flex h-full w-full flex-1 flex-col items-center justify-center"> |
||||
<Card className="w-full max-w-sm"> |
||||
<CardHeader> |
||||
<CardTitle>Login to your account</CardTitle> |
||||
<CardDescription>Enter your email below to login to your account</CardDescription> |
||||
<CardAction> |
||||
<Button variant="link">Sign up</Button> |
||||
</CardAction> |
||||
</CardHeader> |
||||
<CardContent> |
||||
<form> |
||||
<div className="flex flex-col gap-6"> |
||||
<div className="flex flex-col gap-2"> |
||||
<Label htmlFor="email">Email</Label> |
||||
<Input id="email" type="email" placeholder="email@example.com" required /> |
||||
</div> |
||||
<div className="flex flex-col gap-2"> |
||||
<div className="flex items-center justify-between"> |
||||
<Label htmlFor="password">Password</Label> |
||||
<a |
||||
href="#" |
||||
className="ml-auto inline-block text-sm underline-offset-4 hover:underline" |
||||
> |
||||
Forgot your password? |
||||
</a> |
||||
</div> |
||||
<Input id="password" type="password" required /> |
||||
</div> |
||||
</div> |
||||
</form> |
||||
</CardContent> |
||||
<CardFooter className="flex flex-col gap-2"> |
||||
<Button type="submit" className="w-full"> |
||||
Login |
||||
</Button> |
||||
<Button variant="outline" className="w-full"> |
||||
Login with Google |
||||
</Button> |
||||
</CardFooter> |
||||
</Card> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,55 @@ |
||||
'use client'; |
||||
|
||||
import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'; |
||||
|
||||
import { |
||||
ChartConfig, |
||||
ChartContainer, |
||||
ChartLegend, |
||||
ChartLegendContent, |
||||
ChartTooltip, |
||||
ChartTooltipContent, |
||||
} from '@/components/ui/chart'; |
||||
|
||||
const chartData = [ |
||||
{ month: 'January', desktop: 186, mobile: 80 }, |
||||
{ month: 'February', desktop: 305, mobile: 200 }, |
||||
{ month: 'March', desktop: 237, mobile: 120 }, |
||||
{ month: 'April', desktop: 73, mobile: 190 }, |
||||
{ month: 'May', desktop: 209, mobile: 130 }, |
||||
{ month: 'June', desktop: 214, mobile: 140 }, |
||||
]; |
||||
|
||||
const chartConfig = { |
||||
desktop: { |
||||
label: 'Desktop', |
||||
color: 'var(--chart-1)', |
||||
}, |
||||
mobile: { |
||||
label: 'Mobile', |
||||
color: 'var(--chart-2)', |
||||
}, |
||||
} satisfies ChartConfig; |
||||
|
||||
export default function ChartPage() { |
||||
return ( |
||||
<div className="flex flex-1 flex-col items-center justify-center"> |
||||
<ChartContainer config={chartConfig} className="min-h-[200px] max-w-sm"> |
||||
<BarChart accessibilityLayer data={chartData}> |
||||
<CartesianGrid vertical={false} /> |
||||
<XAxis |
||||
dataKey="month" |
||||
tickLine={false} |
||||
tickMargin={10} |
||||
axisLine={false} |
||||
tickFormatter={(v) => v.slice(0, 3)} |
||||
/> |
||||
<ChartTooltip content={<ChartTooltipContent />} /> |
||||
<ChartLegend content={<ChartLegendContent />} /> |
||||
<Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} /> |
||||
<Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} /> |
||||
</BarChart> |
||||
</ChartContainer> |
||||
</div> |
||||
); |
||||
} |
||||
@ -1,75 +1,92 @@ |
||||
import * as React from 'react'; |
||||
import * as React from "react" |
||||
|
||||
import { cn } from '@/lib/utils'; |
||||
import { cn } from "@/lib/utils" |
||||
|
||||
function Card({ className, ...props }: React.ComponentProps<'div'>) { |
||||
function Card({ className, ...props }: React.ComponentProps<"div">) { |
||||
return ( |
||||
<div |
||||
data-slot="card" |
||||
className={cn( |
||||
'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm', |
||||
className, |
||||
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm", |
||||
className |
||||
)} |
||||
{...props} |
||||
/> |
||||
); |
||||
) |
||||
} |
||||
|
||||
function CardHeader({ className, ...props }: React.ComponentProps<'div'>) { |
||||
function CardHeader({ className, ...props }: React.ComponentProps<"div">) { |
||||
return ( |
||||
<div |
||||
data-slot="card-header" |
||||
className={cn( |
||||
'@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6', |
||||
className, |
||||
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6", |
||||
className |
||||
)} |
||||
{...props} |
||||
/> |
||||
); |
||||
) |
||||
} |
||||
|
||||
function CardTitle({ className, ...props }: React.ComponentProps<'div'>) { |
||||
function CardTitle({ className, ...props }: React.ComponentProps<"div">) { |
||||
return ( |
||||
<div |
||||
data-slot="card-title" |
||||
className={cn('leading-none font-semibold', className)} |
||||
className={cn("leading-none font-semibold", className)} |
||||
{...props} |
||||
/> |
||||
); |
||||
) |
||||
} |
||||
|
||||
function CardDescription({ className, ...props }: React.ComponentProps<'div'>) { |
||||
function CardDescription({ className, ...props }: React.ComponentProps<"div">) { |
||||
return ( |
||||
<div |
||||
data-slot="card-description" |
||||
className={cn('text-muted-foreground text-sm', className)} |
||||
className={cn("text-muted-foreground text-sm", className)} |
||||
{...props} |
||||
/> |
||||
); |
||||
) |
||||
} |
||||
|
||||
function CardAction({ className, ...props }: React.ComponentProps<'div'>) { |
||||
function CardAction({ className, ...props }: React.ComponentProps<"div">) { |
||||
return ( |
||||
<div |
||||
data-slot="card-action" |
||||
className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)} |
||||
className={cn( |
||||
"col-start-2 row-span-2 row-start-1 self-start justify-self-end", |
||||
className |
||||
)} |
||||
{...props} |
||||
/> |
||||
); |
||||
) |
||||
} |
||||
|
||||
function CardContent({ className, ...props }: React.ComponentProps<'div'>) { |
||||
return <div data-slot="card-content" className={cn('px-6', className)} {...props} />; |
||||
function CardContent({ className, ...props }: React.ComponentProps<"div">) { |
||||
return ( |
||||
<div |
||||
data-slot="card-content" |
||||
className={cn("px-6", className)} |
||||
{...props} |
||||
/> |
||||
) |
||||
} |
||||
|
||||
function CardFooter({ className, ...props }: React.ComponentProps<'div'>) { |
||||
function CardFooter({ className, ...props }: React.ComponentProps<"div">) { |
||||
return ( |
||||
<div |
||||
data-slot="card-footer" |
||||
className={cn('flex items-center px-6 [.border-t]:pt-6', className)} |
||||
className={cn("flex items-center px-6 [.border-t]:pt-6", className)} |
||||
{...props} |
||||
/> |
||||
); |
||||
) |
||||
} |
||||
|
||||
export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent }; |
||||
export { |
||||
Card, |
||||
CardHeader, |
||||
CardFooter, |
||||
CardTitle, |
||||
CardAction, |
||||
CardDescription, |
||||
CardContent, |
||||
} |
||||
|
||||
@ -0,0 +1,353 @@ |
||||
"use client" |
||||
|
||||
import * as React from "react" |
||||
import * as RechartsPrimitive from "recharts" |
||||
|
||||
import { cn } from "@/lib/utils" |
||||
|
||||
// Format: { THEME_NAME: CSS_SELECTOR }
|
||||
const THEMES = { light: "", dark: ".dark" } as const |
||||
|
||||
export type ChartConfig = { |
||||
[k in string]: { |
||||
label?: React.ReactNode |
||||
icon?: React.ComponentType |
||||
} & ( |
||||
| { color?: string; theme?: never } |
||||
| { color?: never; theme: Record<keyof typeof THEMES, string> } |
||||
) |
||||
} |
||||
|
||||
type ChartContextProps = { |
||||
config: ChartConfig |
||||
} |
||||
|
||||
const ChartContext = React.createContext<ChartContextProps | null>(null) |
||||
|
||||
function useChart() { |
||||
const context = React.useContext(ChartContext) |
||||
|
||||
if (!context) { |
||||
throw new Error("useChart must be used within a <ChartContainer />") |
||||
} |
||||
|
||||
return context |
||||
} |
||||
|
||||
function ChartContainer({ |
||||
id, |
||||
className, |
||||
children, |
||||
config, |
||||
...props |
||||
}: React.ComponentProps<"div"> & { |
||||
config: ChartConfig |
||||
children: React.ComponentProps< |
||||
typeof RechartsPrimitive.ResponsiveContainer |
||||
>["children"] |
||||
}) { |
||||
const uniqueId = React.useId() |
||||
const chartId = `chart-${id || uniqueId.replace(/:/g, "")}` |
||||
|
||||
return ( |
||||
<ChartContext.Provider value={{ config }}> |
||||
<div |
||||
data-slot="chart" |
||||
data-chart={chartId} |
||||
className={cn( |
||||
"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", |
||||
className |
||||
)} |
||||
{...props} |
||||
> |
||||
<ChartStyle id={chartId} config={config} /> |
||||
<RechartsPrimitive.ResponsiveContainer> |
||||
{children} |
||||
</RechartsPrimitive.ResponsiveContainer> |
||||
</div> |
||||
</ChartContext.Provider> |
||||
) |
||||
} |
||||
|
||||
const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => { |
||||
const colorConfig = Object.entries(config).filter( |
||||
([, config]) => config.theme || config.color |
||||
) |
||||
|
||||
if (!colorConfig.length) { |
||||
return null |
||||
} |
||||
|
||||
return ( |
||||
<style |
||||
dangerouslySetInnerHTML={{ |
||||
__html: Object.entries(THEMES) |
||||
.map( |
||||
([theme, prefix]) => ` |
||||
${prefix} [data-chart=${id}] { |
||||
${colorConfig |
||||
.map(([key, itemConfig]) => { |
||||
const color = |
||||
itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || |
||||
itemConfig.color |
||||
return color ? ` --color-${key}: ${color};` : null |
||||
}) |
||||
.join("\n")} |
||||
} |
||||
` |
||||
) |
||||
.join("\n"), |
||||
}} |
||||
/> |
||||
) |
||||
} |
||||
|
||||
const ChartTooltip = RechartsPrimitive.Tooltip |
||||
|
||||
function ChartTooltipContent({ |
||||
active, |
||||
payload, |
||||
className, |
||||
indicator = "dot", |
||||
hideLabel = false, |
||||
hideIndicator = false, |
||||
label, |
||||
labelFormatter, |
||||
labelClassName, |
||||
formatter, |
||||
color, |
||||
nameKey, |
||||
labelKey, |
||||
}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> & |
||||
React.ComponentProps<"div"> & { |
||||
hideLabel?: boolean |
||||
hideIndicator?: boolean |
||||
indicator?: "line" | "dot" | "dashed" |
||||
nameKey?: string |
||||
labelKey?: string |
||||
}) { |
||||
const { config } = useChart() |
||||
|
||||
const tooltipLabel = React.useMemo(() => { |
||||
if (hideLabel || !payload?.length) { |
||||
return null |
||||
} |
||||
|
||||
const [item] = payload |
||||
const key = `${labelKey || item?.dataKey || item?.name || "value"}` |
||||
const itemConfig = getPayloadConfigFromPayload(config, item, key) |
||||
const value = |
||||
!labelKey && typeof label === "string" |
||||
? config[label as keyof typeof config]?.label || label |
||||
: itemConfig?.label |
||||
|
||||
if (labelFormatter) { |
||||
return ( |
||||
<div className={cn("font-medium", labelClassName)}> |
||||
{labelFormatter(value, payload)} |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
if (!value) { |
||||
return null |
||||
} |
||||
|
||||
return <div className={cn("font-medium", labelClassName)}>{value}</div> |
||||
}, [ |
||||
label, |
||||
labelFormatter, |
||||
payload, |
||||
hideLabel, |
||||
labelClassName, |
||||
config, |
||||
labelKey, |
||||
]) |
||||
|
||||
if (!active || !payload?.length) { |
||||
return null |
||||
} |
||||
|
||||
const nestLabel = payload.length === 1 && indicator !== "dot" |
||||
|
||||
return ( |
||||
<div |
||||
className={cn( |
||||
"border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl", |
||||
className |
||||
)} |
||||
> |
||||
{!nestLabel ? tooltipLabel : null} |
||||
<div className="grid gap-1.5"> |
||||
{payload.map((item, index) => { |
||||
const key = `${nameKey || item.name || item.dataKey || "value"}` |
||||
const itemConfig = getPayloadConfigFromPayload(config, item, key) |
||||
const indicatorColor = color || item.payload.fill || item.color |
||||
|
||||
return ( |
||||
<div |
||||
key={item.dataKey} |
||||
className={cn( |
||||
"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5", |
||||
indicator === "dot" && "items-center" |
||||
)} |
||||
> |
||||
{formatter && item?.value !== undefined && item.name ? ( |
||||
formatter(item.value, item.name, item, index, item.payload) |
||||
) : ( |
||||
<> |
||||
{itemConfig?.icon ? ( |
||||
<itemConfig.icon /> |
||||
) : ( |
||||
!hideIndicator && ( |
||||
<div |
||||
className={cn( |
||||
"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", |
||||
{ |
||||
"h-2.5 w-2.5": indicator === "dot", |
||||
"w-1": indicator === "line", |
||||
"w-0 border-[1.5px] border-dashed bg-transparent": |
||||
indicator === "dashed", |
||||
"my-0.5": nestLabel && indicator === "dashed", |
||||
} |
||||
)} |
||||
style={ |
||||
{ |
||||
"--color-bg": indicatorColor, |
||||
"--color-border": indicatorColor, |
||||
} as React.CSSProperties |
||||
} |
||||
/> |
||||
) |
||||
)} |
||||
<div |
||||
className={cn( |
||||
"flex flex-1 justify-between leading-none", |
||||
nestLabel ? "items-end" : "items-center" |
||||
)} |
||||
> |
||||
<div className="grid gap-1.5"> |
||||
{nestLabel ? tooltipLabel : null} |
||||
<span className="text-muted-foreground"> |
||||
{itemConfig?.label || item.name} |
||||
</span> |
||||
</div> |
||||
{item.value && ( |
||||
<span className="text-foreground font-mono font-medium tabular-nums"> |
||||
{item.value.toLocaleString()} |
||||
</span> |
||||
)} |
||||
</div> |
||||
</> |
||||
)} |
||||
</div> |
||||
) |
||||
})} |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
const ChartLegend = RechartsPrimitive.Legend |
||||
|
||||
function ChartLegendContent({ |
||||
className, |
||||
hideIcon = false, |
||||
payload, |
||||
verticalAlign = "bottom", |
||||
nameKey, |
||||
}: React.ComponentProps<"div"> & |
||||
Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & { |
||||
hideIcon?: boolean |
||||
nameKey?: string |
||||
}) { |
||||
const { config } = useChart() |
||||
|
||||
if (!payload?.length) { |
||||
return null |
||||
} |
||||
|
||||
return ( |
||||
<div |
||||
className={cn( |
||||
"flex items-center justify-center gap-4", |
||||
verticalAlign === "top" ? "pb-3" : "pt-3", |
||||
className |
||||
)} |
||||
> |
||||
{payload.map((item) => { |
||||
const key = `${nameKey || item.dataKey || "value"}` |
||||
const itemConfig = getPayloadConfigFromPayload(config, item, key) |
||||
|
||||
return ( |
||||
<div |
||||
key={item.value} |
||||
className={cn( |
||||
"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3" |
||||
)} |
||||
> |
||||
{itemConfig?.icon && !hideIcon ? ( |
||||
<itemConfig.icon /> |
||||
) : ( |
||||
<div |
||||
className="h-2 w-2 shrink-0 rounded-[2px]" |
||||
style={{ |
||||
backgroundColor: item.color, |
||||
}} |
||||
/> |
||||
)} |
||||
{itemConfig?.label} |
||||
</div> |
||||
) |
||||
})} |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
// Helper to extract item config from a payload.
|
||||
function getPayloadConfigFromPayload( |
||||
config: ChartConfig, |
||||
payload: unknown, |
||||
key: string |
||||
) { |
||||
if (typeof payload !== "object" || payload === null) { |
||||
return undefined |
||||
} |
||||
|
||||
const payloadPayload = |
||||
"payload" in payload && |
||||
typeof payload.payload === "object" && |
||||
payload.payload !== null |
||||
? payload.payload |
||||
: undefined |
||||
|
||||
let configLabelKey: string = key |
||||
|
||||
if ( |
||||
key in payload && |
||||
typeof payload[key as keyof typeof payload] === "string" |
||||
) { |
||||
configLabelKey = payload[key as keyof typeof payload] as string |
||||
} else if ( |
||||
payloadPayload && |
||||
key in payloadPayload && |
||||
typeof payloadPayload[key as keyof typeof payloadPayload] === "string" |
||||
) { |
||||
configLabelKey = payloadPayload[ |
||||
key as keyof typeof payloadPayload |
||||
] as string |
||||
} |
||||
|
||||
return configLabelKey in config |
||||
? config[configLabelKey] |
||||
: config[key as keyof typeof config] |
||||
} |
||||
|
||||
export { |
||||
ChartContainer, |
||||
ChartTooltip, |
||||
ChartTooltipContent, |
||||
ChartLegend, |
||||
ChartLegendContent, |
||||
ChartStyle, |
||||
} |
||||
Loading…
Reference in new issue