Get Cards

import { useQuery } from "convex/react";
import { api } from "@teak/convex";

function CardDetail({ cardId }: { cardId: Id<"cards"> }) {
  const card = useQuery(api.card.getCard.getCard, { id: cardId });

  if (!card) return <div>Card not found</div>;

  return (
    <div>
      <h1>{card.content}</h1>
      {card.fileUrl && <img src={card.fileUrl} />}
      {card.thumbnailUrl && <img src={card.thumbnailUrl} />}
      <p>Tags: {card.tags?.join(", ")}</p>
    </div>
  );
}

import { useQuery } from "convex/react";
import { api } from "@teak/convex";

function CardList() {
  const cards = useQuery(api.card.getCards.getCards, {
    type: "link",
    favoritesOnly: false,
    limit: 50
  });

  return (
    <div>
      {cards?.map(card => (
        <CardItem key={card._id} card={card} />
      ))}
    </div>
  );
}

import { useQuery } from "convex/react";
import { api } from "@teak/convex";

function TrashBin() {
  const deletedCards = useQuery(api.card.getCard.getDeletedCards, {
    limit: 50
  });

  return (
    <div>
      <h2>Trash ({deletedCards?.length})</h2>
      {deletedCards?.map(card => (
        <DeletedCardItem key={card._id} card={card} />
      ))}
    </div>
  );
}