块引用

import { Blockquote } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Blockquote.Root>
      <Blockquote.Content>
        If anyone thinks he is something when he is nothing, he deceives
        himself. Each one should test his own actions. Then he can take pride in
        himself, without comparing himself to anyone else.
      </Blockquote.Content>
    </Blockquote.Root>
  )
}

import { Blockquote } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Blockquote.Root>
      <Blockquote.Content cite="Uzumaki Naruto">
        If anyone thinks he is something when he is nothing, he deceives
        himself. Each one should test his own actions. Then he can take pride in
        himself, without comparing himself to anyone else.
      </Blockquote.Content>
      <Blockquote.Caption>
        — <cite>Uzumaki Naruto</cite>
      </Blockquote.Caption>
    </Blockquote.Root>
  )
}

import { Blockquote, Stack, Text } from "@chakra-ui/react"
import { colorPalettes } from "compositions/lib/color-palettes"

const Demo = () => {
  return (
    <Stack gap="5" align="flex-start">
      {colorPalettes.map((colorPalette) => (
        <Stack
          align="center"
          key={colorPalette}
          direction="row"
          gap="10"
          px="4"
          width="full"
        >
          <Text minW="8ch">{colorPalette}</Text>
          <Blockquote.Root colorPalette={colorPalette}>
            <Blockquote.Content cite="Uzumaki Naruto">
              If anyone thinks he is something when he is nothing, he deceives
              himself. Each one should test his own actions. Then he can take
              pride in himself, without comparing himself to anyone else.
            </Blockquote.Content>
            <Blockquote.Caption>
              — <cite>Uzumaki Naruto</cite>
            </Blockquote.Caption>
          </Blockquote.Root>
        </Stack>
      ))}
    </Stack>
  )
}

import { Blockquote, Stack } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Stack gap="8">
      <Blockquote.Root variant="subtle">
        <Blockquote.Content>
          If anyone thinks he is something when he is nothing, he deceives
          himself. Each one should test his own actions. Then he can take pride
          in himself, without comparing himself to anyone else.
        </Blockquote.Content>
      </Blockquote.Root>
      <Blockquote.Root variant="solid">
        <Blockquote.Content>
          If anyone thinks he is something when he is nothing, he deceives
          himself. Each one should test his own actions. Then he can take pride
          in himself, without comparing himself to anyone else.
        </Blockquote.Content>
      </Blockquote.Root>
    </Stack>
  )
}

import { Blockquote, Float } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Blockquote.Root variant="plain" colorPalette="teal">
      <Float placement="top-start" offsetY="2">
        <Blockquote.Icon />
      </Float>
      <Blockquote.Content cite="Uzumaki Naruto">
        If anyone thinks he is something when he is nothing, he deceives
        himself. Each one should test his own actions. Then he can take pride in
        himself, without comparing himself to anyone else.
      </Blockquote.Content>
      <Blockquote.Caption>
        — <cite>Uzumaki Naruto</cite>
      </Blockquote.Caption>
    </Blockquote.Root>
  )
}

import { Blockquote, Circle, Float } from "@chakra-ui/react"
import { LuQuote } from "react-icons/lu"

const Demo = () => {
  return (
    <Blockquote.Root colorPalette="blue" ps="8">
      <Float placement="middle-start">
        <Circle bg="blue.600" size="8" color="white">
          <LuQuote />
        </Circle>
      </Float>
      <Blockquote.Content cite="Uzumaki Naruto">
        If anyone thinks he is something when he is nothing, he deceives
        himself. Each one should test his own actions. Then he can take pride in
        himself, without comparing himself to anyone else.
      </Blockquote.Content>
      <Blockquote.Caption>
        — <cite>Uzumaki Naruto</cite>
      </Blockquote.Caption>
    </Blockquote.Root>
  )
}

import { Blockquote, For, HStack, Stack, Text } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Stack gap="20">
      <For each={["start", "center", "end"]}>
        {(justify) => (
          <HStack key={justify} maxW="xl">
            <Text color="fg.muted" minW="6rem">
              {justify}
            </Text>
            <Blockquote.Root variant="plain" justify={justify}>
              <Blockquote.Content cite="Uzumaki Naruto">
                If anyone thinks he is something when he is nothing, he deceives
                himself. Each one should test his own actions. Then he can take
                pride in himself, without comparing himself to anyone else.
              </Blockquote.Content>
              <Blockquote.Caption>
                — <cite>Uzumaki Naruto</cite>
              </Blockquote.Caption>
            </Blockquote.Root>
          </HStack>
        )}
      </For>
    </Stack>
  )
}

import { Avatar, Blockquote, Float, HStack, Span } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Blockquote.Root bg="bg.subtle" padding="8">
      <Float placement="bottom-end" offset="10">
        <Blockquote.Icon opacity="0.4" boxSize="10" rotate="180deg" />
      </Float>
      <Blockquote.Content cite="Uzumaki Naruto">
        If anyone thinks he is something when he is nothing, he deceives
        himself. Each one should test his own actions. Then he can take pride in
        himself, without comparing himself to anyone else.
      </Blockquote.Content>
      <Blockquote.Caption>
        <cite>
          <HStack mt="2" gap="3">
            <Avatar.Root size="sm">
              <Avatar.Fallback name="Emily Jones" />
              <Avatar.Image src="https://i.pravatar.cc/150?u=re" />
            </Avatar.Root>
            <Span fontWeight="medium">Emily Jones</Span>
          </HStack>
        </cite>
      </Blockquote.Caption>
    </Blockquote.Root>
  )
}