【Convex】NextJs14 と Convex【#２３ Convex CardList】

【#２３ Convex CardList】

YouTube: https://youtu.be/kpWqmmboNWA
https://youtu.be/kpWqmmboNWA

今回はカードの表示について実装を進めていきます。

app/(main)/_components/card-list.tsx

"use client";

import { useQuery } from "convex/react";
import { NewCardButton } from "./new-card-button";
import { api } from "@/convex/_generated/api";

import { Card } from "./card";

interface Props {
  orgId: string;
}

export const CardList = ({ orgId }: Props) => {
  const data = useQuery(api.cards.get, { orgId });

  return (
    <div>
      <h2>Card List</h2>
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-5 mt-8 pb-10">
        <NewCardButton orgId={orgId} />
        {data?.map((card) => (
          <Card
            key={card._id}
            id={card._id}
            title={card.title}
            imageUrl={card.imageUrl}
            authorId={card.authorId}
            authorName={card.authorName}
            createdAt={card._creationTime}
            orgId={card.orgId}
            cardType={card.cardType}
          />
        ))}
      </div>
    </div>
  );
};

app/(main)/_components/card/index.tsx

"use client";

import Image from "next/image";

interface Props {
  id: string;
  title: string;
  imageUrl: string;
  authorId: string;
  authorName: string;
  createdAt: number;
  orgId: string;
  cardType: string;
}

export const Card = ({
  id,
  title,
  imageUrl,
  authorId,
  authorName,
  createdAt,
  orgId,
  cardType,
}: Props) => {
  return (
    <div className="group aspect-[100/128] border rounded-lg flex flex-col justify-between overflow-hidden">
      <div className="relative flex-1 bg-slate-700">
        <Image src={imageUrl} alt={title} fill className="object-cover" />
      </div>
    </div>
  );
};