Card Components

import { Card } from "@/components/card/Card";

<Card $hoverable={true} $color="text-primary">
  <Text>Card content</Text>
</Card>

import { SummaryCard } from "@/components/card/SummaryCard";

<SummaryCard
  title="Anime Title"
  description="2024 • Winter • TV"
  image="/images/cover.jpg"
  to="/anime/example"
/>

<SummaryCard
  title="Example"
  description={
    <SummaryCard.Description>
      {["2024", "Winter", "TV"]}
    </SummaryCard.Description>
  }
/>

import { ThemeDetailCard } from "@/components/card/ThemeDetailCard";
import { ThemeDetailCardThemeFragment } from "@/generated/graphql";

interface Props {
  theme: ThemeDetailCardThemeFragment;
}

export function ThemeList({ theme }: Props) {
  return <ThemeDetailCard theme={theme} />;
}

fragment ThemeDetailCardTheme on Theme {
  type
  sequence
  group {
    name
    slug
  }
  anime {
    slug
    name
  }
  song {
    title
    performances {
      alias
      as
      artist {
        slug
        name
      }
    }
  }
  entries {
    version
    episodes
    spoiler
    nsfw
    videos {
      filename
      tags
    }
  }
}

<StyledThemeCard>
  <StyledRow>
    <Text variant="small" color="text">
      {theme.type}{theme.sequence || null}
    </Text>
    <Text>
      <SongTitle song={theme.song} />
      <Performances song={theme.song} expandable />
    </Text>
    <ThemeMenu theme={theme} />
  </StyledRow>
  {theme.entries.sort(entryVersionComparator).map((entry) => (
    <StyledRow key={entry.version || 0}>
      {/* Entry details and video buttons */}
    </StyledRow>
  ))}
</StyledThemeCard>

import { AnnouncementCard } from "@/components/card/AnnouncementCard";
import type { MDXRemoteSerializeResult } from "next-mdx-remote";

interface Props {
  announcementSource: MDXRemoteSerializeResult;
}

export function Announcements({ announcementSource }: Props) {
  return <AnnouncementCard announcementSource={announcementSource} />;
}

<Solid>
  <Card>
    {/* Card background adjusts to solid-on-card color */}
  </Card>
</Solid>