Timeline

import { Text } from "@chakra-ui/react"
import {
  TimelineConnector,
  TimelineContent,
  TimelineDescription,
  TimelineItem,
  TimelineRoot,
  TimelineTitle,
} from "@/components/ui/timeline"
import { LuCheck, LuPackage, LuShip } from "react-icons/lu"

const Demo = () => {
  return (
    <TimelineRoot maxW="400px">
      <TimelineItem>
        <TimelineConnector>
          <LuShip />
        </TimelineConnector>
        <TimelineContent>
          <TimelineTitle>Product Shipped</TimelineTitle>
          <TimelineDescription>13th May 2021</TimelineDescription>
          <Text textStyle="sm">
            We shipped your product via <strong>FedEx</strong> and it should
            arrive within 3-5 business days.
          </Text>
        </TimelineContent>
      </TimelineItem>

      <TimelineItem>
        <TimelineConnector>
          <LuCheck />
        </TimelineConnector>
        <TimelineContent>
          <TimelineTitle textStyle="sm">Order Confirmed</TimelineTitle>
          <TimelineDescription>18th May 2021</TimelineDescription>
        </TimelineContent>
      </TimelineItem>

      <TimelineItem>
        <TimelineConnector>
          <LuPackage />
        </TimelineConnector>
        <TimelineContent>
          <TimelineTitle textStyle="sm">Order Delivered</TimelineTitle>
          <TimelineDescription>20th May 2021, 10:30am</TimelineDescription>
        </TimelineContent>
      </TimelineItem>
    </TimelineRoot>
  )
}

import { Badge, For, Span, Stack } from "@chakra-ui/react"
import { Avatar } from "@/components/ui/avatar"
import {
  TimelineConnector,
  TimelineContent,
  TimelineItem,
  TimelineRoot,
  TimelineTitle,
} from "@/components/ui/timeline"
import { LuCheck } from "react-icons/lu"

const Demo = () => {
  return (
    <Stack gap="8">
      <For each={["sm", "md", "lg", "xl"]}>
        {(size) => (
          <TimelineRoot key={size} size={size}>
            <TimelineItem>
              <TimelineConnector>
                <Avatar
                  size="full"
                  name="Sage"
                  src="https://bit.ly/sage-adebayo"
                />
              </TimelineConnector>
              <TimelineContent textStyle="xs">
                <TimelineTitle>
                  <Span fontWeight="medium">sage</Span>
                  created a new project
                </TimelineTitle>
              </TimelineContent>
            </TimelineItem>

            <TimelineItem>
              <TimelineConnector>
                <LuCheck />
              </TimelineConnector>
              <TimelineContent textStyle="xs">
                <TimelineTitle mt={size === "sm" ? "-2px" : undefined}>
                  <Span fontWeight="medium">sage</Span>
                  changed status from <Badge size="sm">
                    In progress
                  </Badge> to{" "}
                  <Badge colorPalette="teal" size="sm">
                    Completed
                  </Badge>
                </TimelineTitle>
              </TimelineContent>
            </TimelineItem>
          </TimelineRoot>
        )}
      </For>
    </Stack>
  )
}

import { Badge, For, Span, Stack } from "@chakra-ui/react"
import { Avatar } from "@/components/ui/avatar"
import {
  TimelineConnector,
  TimelineContent,
  TimelineItem,
  TimelineRoot,
  TimelineTitle,
} from "@/components/ui/timeline"
import { LuCheck } from "react-icons/lu"

const Demo = () => {
  return (
    <Stack gap="16">
      <For each={["subtle", "solid", "outline", "plain"]}>
        {(variant) => (
          <TimelineRoot variant={variant} key={variant}>
            <TimelineItem>
              <TimelineConnector>
                <Avatar
                  size="full"
                  name="Sage"
                  src="https://bit.ly/sage-adebayo"
                />
              </TimelineConnector>
              <TimelineContent>
                <TimelineTitle>
                  <Span fontWeight="medium">sage</Span>
                  created a new project
                </TimelineTitle>
              </TimelineContent>
            </TimelineItem>

            <TimelineItem>
              <TimelineConnector>
                <LuCheck />
              </TimelineConnector>
              <TimelineContent>
                <TimelineTitle>
                  <Span fontWeight="medium">sage</Span>
                  changed status from <Badge>In progress</Badge> to{" "}
                  <Badge colorPalette="teal">Completed</Badge>
                </TimelineTitle>
              </TimelineContent>
            </TimelineItem>
          </TimelineRoot>
        )}
      </For>
    </Stack>
  )
}

import { For, Stack, Timeline } from "@chakra-ui/react"
import {
  TimelineConnector,
  TimelineContent,
  TimelineItem,
  TimelineRoot,
  TimelineTitle,
} from "@/components/ui/timeline"

const Demo = () => {
  return (
    <Stack gap="8">
      <For each={["sm", "md", "lg"]}>
        {(size) => (
          <TimelineRoot size={size} key={size}>
            <TimelineItem>
              <TimelineContent width="auto">
                <TimelineTitle whiteSpace="nowrap">Nov 1994</TimelineTitle>
              </TimelineContent>
              <TimelineConnector>1</TimelineConnector>
              <Timeline.Content>
                <TimelineTitle>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </TimelineTitle>
              </Timeline.Content>
            </TimelineItem>

            <TimelineItem>
              <TimelineContent width="auto">
                <TimelineTitle whiteSpace="nowrap">Nov 2010</TimelineTitle>
              </TimelineContent>
              <TimelineConnector>2</TimelineConnector>
              <TimelineContent>
                <TimelineTitle>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </TimelineTitle>
              </TimelineContent>
            </TimelineItem>
          </TimelineRoot>
        )}
      </For>
    </Stack>
  )
}

import {
  TimelineConnector,
  TimelineContent,
  TimelineItem,
  TimelineRoot,
  TimelineTitle,
} from "@/components/ui/timeline"

const Demo = () => {
  return (
    <TimelineRoot size="sm" variant="outline">
      <TimelineItem>
        <TimelineContent flex="1" />
        <TimelineConnector />
        <TimelineContent flex="1">
          <TimelineTitle>Placed Order</TimelineTitle>
        </TimelineContent>
      </TimelineItem>

      <TimelineItem>
        <TimelineContent flex="1" alignItems="flex-end">
          <TimelineTitle>Prepared Order</TimelineTitle>
        </TimelineContent>
        <TimelineConnector />
        <TimelineContent flex="1" />
      </TimelineItem>

      <TimelineItem>
        <TimelineContent flex="1" />
        <TimelineConnector />
        <TimelineContent flex="1">
          <TimelineTitle>Order Delivered</TimelineTitle>
        </TimelineContent>
      </TimelineItem>
    </TimelineRoot>
  )
}

import { Button, Card, Icon, Input, Span } from "@chakra-ui/react"
import { Avatar } from "@/components/ui/avatar"
import {
  TimelineConnector,
  TimelineContent,
  TimelineItem,
  TimelineRoot,
  TimelineTitle,
} from "@/components/ui/timeline"
import { LuPen, LuX } from "react-icons/lu"
import LoremIpsum from "react-lorem-ipsum"

const Demo = () => {
  return (
    <TimelineRoot size="lg" variant="subtle" maxW="md">
      <TimelineItem>
        <TimelineConnector>
          <Icon fontSize="xs">
            <LuPen />
          </Icon>
        </TimelineConnector>
        <TimelineContent>
          <TimelineTitle>
            <Avatar size="2xs" src="https://i.pravatar.cc/150?u=a" />
            Lucas Moras <Span color="fg.muted">has changed</Span>
            <Span fontWeight="medium">3 labels</Span> on
            <Span color="fg.muted">Jan 1, 2024</Span>
          </TimelineTitle>
        </TimelineContent>
      </TimelineItem>

      <TimelineItem>
        <TimelineConnector>
          <Icon fontSize="xs">
            <LuX />
          </Icon>
        </TimelineConnector>
        <TimelineContent>
          <TimelineTitle>
            <Avatar size="2xs" src="https://i.pravatar.cc/150?u=x" />
            Jenna Smith <Span color="fg.muted">removed</Span>
            <Span fontWeight="medium">Enas</Span>
            <Span color="fg.muted">on Jan 12, 2024</Span>
          </TimelineTitle>
        </TimelineContent>
      </TimelineItem>

      <TimelineItem>
        <TimelineConnector bg="teal.solid" color="teal.contrast">
          <Icon fontSize="xs">
            <LuX />
          </Icon>
        </TimelineConnector>
        <TimelineContent gap="4">
          <TimelineTitle>
            <Avatar size="2xs" src="https://i.pravatar.cc/150?u=y" />
            Erica <Span color="fg.muted">commented</Span>
            <Span color="fg.muted">on Jan 12, 2024</Span>
          </TimelineTitle>
          <Card.Root size="sm">
            <Card.Body textStyle="sm" lineHeight="tall">
              <LoremIpsum p={1} avgWordsPerSentence={2} />
            </Card.Body>
            <Card.Footer>
              <Button size="xs" variant="surface" rounded="md">
                👏 2
              </Button>
            </Card.Footer>
          </Card.Root>
        </TimelineContent>
      </TimelineItem>

      <TimelineItem>
        <TimelineConnector>
          <Avatar size="full" src="https://i.pravatar.cc/150?u=o" />
        </TimelineConnector>
        <TimelineContent gap="4" mt="-1" w="full">
          <Input size="sm" placeholder="Add comment..." />
        </TimelineContent>
      </TimelineItem>
    </TimelineRoot>
  )
}