35 lines
866 B
TypeScript
35 lines
866 B
TypeScript
import CategoryCard from "@/components/category/category-card";
|
|
import { Category } from "@/server/db/schema";
|
|
import React from "react";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
|
|
export const CATEGORY_GRID_CLASS =
|
|
"grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3";
|
|
|
|
function CategoryGrid({ categories }: { categories: Category[] }) {
|
|
return (
|
|
<menu className={CATEGORY_GRID_CLASS}>
|
|
{categories.map((category, idx) => (
|
|
<li key={idx}>
|
|
<CategoryCard {...category} />
|
|
</li>
|
|
))}
|
|
</menu>
|
|
);
|
|
}
|
|
|
|
export default CategoryGrid;
|
|
|
|
export function CategoryGridSkeleton() {
|
|
const range = Array.from(new Array(6).keys());
|
|
return (
|
|
<ul className={CATEGORY_GRID_CLASS}>
|
|
{range.map((i) => (
|
|
<li key={i}>
|
|
<Skeleton className="h-12 w-full" />
|
|
</li>
|
|
))}
|
|
</ul>
|
|
);
|
|
}
|