43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
"use client"
|
|
|
|
import type React from "react"
|
|
import { cn } from "@/app/lib/utils"
|
|
|
|
interface CardGridProps {
|
|
children: React.ReactNode
|
|
className?: string
|
|
columns?: {
|
|
sm?: number
|
|
md?: number
|
|
lg?: number
|
|
xl?: number
|
|
}
|
|
gap?: "none" | "sm" | "md" | "lg"
|
|
}
|
|
|
|
/**
|
|
* 自适应卡片网格组件
|
|
* 根据屏幕尺寸自动调整卡片布局
|
|
*/
|
|
export function CardGrid({ children, className, columns = { sm: 1, md: 2, lg: 3, xl: 4 }, gap = "md" }: CardGridProps) {
|
|
// 根据gap参数设置间距
|
|
const gapClasses = {
|
|
none: "gap-0",
|
|
sm: "gap-2",
|
|
md: "gap-4",
|
|
lg: "gap-6",
|
|
}
|
|
|
|
// 根据columns参数设置网格列数
|
|
const getGridCols = () => {
|
|
const cols = []
|
|
if (columns.sm) cols.push(`grid-cols-${columns.sm}`)
|
|
if (columns.md) cols.push(`md:grid-cols-${columns.md}`)
|
|
if (columns.lg) cols.push(`lg:grid-cols-${columns.lg}`)
|
|
if (columns.xl) cols.push(`xl:grid-cols-${columns.xl}`)
|
|
return cols.join(" ")
|
|
}
|
|
|
|
return <div className={cn("grid w-full", getGridCols(), gapClasses[gap], className)}>{children}</div>
|
|
}
|