58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { use } from "react";
|
|
import Link from "next/link";
|
|
import clsx from "clsx";
|
|
|
|
import { Grid, Section, Skeleton } from "@/components/ui";
|
|
import { Action } from "@/entities/dashboard/types";
|
|
import { ROUTES } from "@/shared/constants/client-routes";
|
|
|
|
import { CompatibilityCard } from "../../cards";
|
|
|
|
import styles from "./CompatibilitySection.module.scss";
|
|
|
|
interface CompatibilitySectionProps {
|
|
promise: Promise<Action[]>;
|
|
gridDisplayMode?: "vertical" | "horizontal";
|
|
}
|
|
|
|
export default function CompatibilitySection({
|
|
promise,
|
|
gridDisplayMode = "horizontal",
|
|
}: CompatibilitySectionProps) {
|
|
const compatibilities = use(promise);
|
|
|
|
if (!compatibilities || compatibilities.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
const columns = Math.ceil(compatibilities.length / 2);
|
|
|
|
return (
|
|
<Section title="Compatibility" contentClassName={styles.sectionContent}>
|
|
<Grid
|
|
columns={columns}
|
|
className={clsx(styles.grid, styles[gridDisplayMode])}
|
|
>
|
|
{compatibilities.map(compatibility => (
|
|
<Link
|
|
href={ROUTES.compatibility(compatibility._id)}
|
|
key={compatibility._id}
|
|
>
|
|
<CompatibilityCard key={compatibility._id} {...compatibility} />
|
|
</Link>
|
|
))}
|
|
</Grid>
|
|
</Section>
|
|
);
|
|
}
|
|
|
|
export function CompatibilitySectionSkeleton() {
|
|
return (
|
|
<Section title="Compatibility" contentClassName={styles.sectionContent}>
|
|
<Skeleton className={styles.skeleton} />
|
|
</Section>
|
|
);
|
|
}
|