Timeline

<Timeline.Root>
  <Timeline.Item>
    <Timeline.Connector>
      <Timeline.Indicator />
    </Timeline.Connector>
    <Timeline.Content>
      <Timeline.Title>第1部 ファントムブラッド</Timeline.Title>
      <Timeline.Description>
        全てはここから始まった！ジョナサンとディオ、運命の出会い‼
      </Timeline.Description>
    </Timeline.Content>
  </Timeline.Item>

  <Timeline.Item>
    <Timeline.Connector>
      <Timeline.Indicator />
    </Timeline.Connector>
    <Timeline.Content>
      <Timeline.Title>第2部 戦闘潮流</Timeline.Title>
      <Timeline.Description>
        石仮面を創った「柱の一族」が蘇る！究極の生命体カーズを打ち破れ‼
      </Timeline.Description>
    </Timeline.Content>
  </Timeline.Item>

  <Timeline.Item>
    <Timeline.Connector>
      <Timeline.Indicator />
    </Timeline.Connector>
    <Timeline.Content>
      <Timeline.Title>第3部 スターダストクルセイダース</Timeline.Title>
      <Timeline.Description>
        DIO復活…！永き因縁に終止符を打つスタンドバトル‼
      </Timeline.Description>
    </Timeline.Content>
  </Timeline.Item>
</Timeline.Root>

const items = useMemo<Timeline.Item[]>(
  () => [
    {
      description: "全てはここから始まった！ジョナサンとディオ、運命の出会い‼",
      title: "第1部 ファントムブラッド",
    },
    {
      description:
        "石仮面を創った「柱の一族」が蘇る！究極の生命体カーズを打ち破れ‼",
      title: "第2部 戦闘潮流",
    },
    {
      description: "DIO復活…！永き因縁に終止符を打つスタンドバトル‼",
      title: "第3部 スターダストクルセイダース",
    },
  ],
  [],
)

return <Timeline.Root items={items} />

const items = useMemo<Timeline.Item[]>(
  () => [
    {
      description: "全てはここから始まった！ジョナサンとディオ、運命の出会い‼",
      title: "第1部 ファントムブラッド",
    },
    {
      description:
        "石仮面を創った「柱の一族」が蘇る！究極の生命体カーズを打ち破れ‼",
      title: "第2部 戦闘潮流",
    },
    {
      description: "DIO復活…！永き因縁に終止符を打つスタンドバトル‼",
      title: "第3部 スターダストクルセイダース",
    },
  ],
  [],
)

return (
  <VStack>
    <For each={["plain", "number"]}>
      {(variant) => (
        <Timeline.Root
          key={variant}
          variant={variant}
          items={items}
          shape={variant === "number" ? "rounded" : undefined}
        />
      )}
    </For>
  </VStack>
)

const items = useMemo<Timeline.Item[]>(
  () => [
    {
      description: "全てはここから始まった！ジョナサンとディオ、運命の出会い‼",
      title: "第1部 ファントムブラッド",
    },
    {
      description:
        "石仮面を創った「柱の一族」が蘇る！究極の生命体カーズを打ち破れ‼",
      title: "第2部 戦闘潮流",
    },
    {
      description: "DIO復活…！永き因縁に終止符を打つスタンドバトル‼",
      title: "第3部 スターダストクルセイダース",
    },
  ],
  [],
)

return (
  <VStack>
    <For each={["sm", "md", "lg"]}>
      {(size) => <Timeline.Root key={size} size={size} items={items} />}
    </For>
  </VStack>
)

const items = useMemo<Timeline.Item[]>(
  () => [
    {
      description: "全てはここから始まった！ジョナサンとディオ、運命の出会い‼",
      title: "第1部 ファントムブラッド",
    },
    {
      description:
        "石仮面を創った「柱の一族」が蘇る！究極の生命体カーズを打ち破れ‼",
      title: "第2部 戦闘潮流",
    },
    {
      description: "DIO復活…！永き因縁に終止符を打つスタンドバトル‼",
      title: "第3部 スターダストクルセイダース",
    },
  ],
  [],
)

return (
  <VStack>
    <For each={["success", "warning"]}>
      {(colorScheme) => (
        <Timeline.Root
          key={colorScheme}
          colorScheme={colorScheme}
          items={items}
        />
      )}
    </For>
  </VStack>
)

const items = useMemo<Timeline.Item[]>(
  () => [
    {
      description: "全てはここから始まった！ジョナサンとディオ、運命の出会い‼",
      title: "第1部 ファントムブラッド",
    },
    {
      description:
        "石仮面を創った「柱の一族」が蘇る！究極の生命体カーズを打ち破れ‼",
      title: "第2部 戦闘潮流",
    },
    {
      description: "DIO復活…！永き因縁に終止符を打つスタンドバトル‼",
      title: "第3部 スターダストクルセイダース",
    },
  ],
  [],
)

return (
  <VStack>
    <For each={["start", "center", "end"]}>
      {(align) => (
        <Timeline.Root
          key={align}
          align={align}
          items={
            align !== "start"
              ? items?.map((item, index) => ({
                  align: align !== "end" && index % 2 === 0 ? "start" : "end",
                  ...item,
                }))
              : items
          }
        />
      )}
    </For>
  </VStack>
)

const items = useMemo<Timeline.Item[]>(
  () => [
    {
      description: "全てはここから始まった！ジョナサンとディオ、運命の出会い‼",
      title: "第1部 ファントムブラッド",
    },
    {
      description:
        "石仮面を創った「柱の一族」が蘇る！究極の生命体カーズを打ち破れ‼",
      title: "第2部 戦闘潮流",
    },
    {
      description: "DIO復活…！永き因縁に終止符を打つスタンドバトル‼",
      title: "第3部 スターダストクルセイダース",
    },
  ],
  [],
)

return (
  <VStack>
    <For each={["circle", "rounded", "square"]}>
      {(shape) => <Timeline.Root key={shape} shape={shape} items={items} />}
    </For>
  </VStack>
)

const items = useMemo<Timeline.Item[]>(
  () => [
    {
      description: "全てはここから始まった！ジョナサンとディオ、運命の出会い‼",
      title: "第1部 ファントムブラッド",
      indicator: <GhostIcon fontSize="xl" />,
    },
    {
      description:
        "石仮面を創った「柱の一族」が蘇る！究極の生命体カーズを打ち破れ‼",
      title: "第2部 戦闘潮流",
      indicator: <AxeIcon fontSize="xl" />,
    },
    {
      description: "DIO復活…！永き因縁に終止符を打つスタンドバトル‼",
      title: "第3部 スターダストクルセイダース",
      indicator: <SparklesIcon fontSize="xl" />,
    },
  ],
  [],
)

return <Timeline.Root items={items} shape="square" />

const items = useMemo<Timeline.Item[]>(
  () => [
    {
      description: "全てはここから始まった！ジョナサンとディオ、運命の出会い‼",
      title: "第1部 ファントムブラッド",
    },
    {
      description:
        "石仮面を創った「柱の一族」が蘇る！究極の生命体カーズを打ち破れ‼",
      title: "第2部 戦闘潮流",
    },
    {
      description: "DIO復活…！永き因縁に終止符を打つスタンドバトル‼",
      title: "第3部 スターダストクルセイダース",
    },
  ],
  [],
)
return <Timeline.Root attached items={items} />