Blockquote

인용문을 본문과 구분해 보여 주는 컴포넌트입니다. 출처를 함께 넘기면 인용과 출처를 올바른 시맨틱 마크업으로 묶어 줍니다.

import { Blockquote } from 'neba';

<Blockquote>완벽함이란 더 보탤 것이 없을 때가 아니라 더 뺄 것이 없을 때 이루어진다.</Blockquote>

<Blockquote author="생텍쥐페리" source="인간의 대지">
  완벽함이란 더 보탤 것이 없을 때가 아니라 더 뺄 것이 없을 때 이루어진다.
</Blockquote>;

Props

Prop	타입	기본값	설명
variant공통	'solid' | 'outline' | 'text'	'text'	인용을 얹을 시트의 무게. text가 기본이며 여백의 선 하나뿐입니다. 표면이 생기기 훨씬 전부터 인용은 그렇게 생겼습니다. 어느 쪽이든 강조선은 그대로 남습니다
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	인용문의 타입 스케일과 시트의 여백. 본문보다 한 단계 위이고 행간은 문단이 필요한 만큼 열려 있습니다
color공통	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	의미론적 색 역할. 시트에는 물들지 않습니다. 색은 여백의 선과 인용부호에만 나타납니다
density공통	'default' | 'compact'	'default'	여백만 바꿉니다. 높이와 글자 크기는 그대로
elevation공통	0 | 1 | 2 | 3	0	그림자 깊이. 인용은 페이지 위에 떠 있는 것이 아니라 페이지 안에 놓이는 것이라 거의 올리지 않습니다
author	ReactNode	—	말한 사람. 이 값이 있으면 전체가 figure + figcaption이 됩니다. 출처는 인용문 **바깥**에 있어야 한다는 것이 명세의 요구입니다
source	ReactNode	—	어디서 나온 말인지, 책, 강연, 문서. cite 요소로 렌더링됩니다. cite는 작품의 제목을 위한 것이지 사람 이름을 위한 것이 아닙니다
cite	string	—	인용 출처의 URL. blockquote의 cite 속성으로 들어가며 기계만 읽습니다. 사람이 볼 것은 source입니다
icon	ReactNode | false	—	인용문 앞의 표식. 생략하면 기본 글리프, 노드를 넘기면 교체, false면 없앱니다
children	ReactNode	—	인용된 말
transition공통	NebaTransition	—	mount 시 한 번 실행되는 등장 애니메이션 (transition="fade"). 트리거나 반복이 필요하면 Animate* 컴포넌트로 감싸세요

출처가 없으면 <blockquote> 하나로 렌더링됩니다. author나 source 중 하나라도 있으면 <figure>로 감싸고 출처를 <figcaption>에 넣습니다.

<figure>
  <blockquote cite="…">…</blockquote>
  <figcaption>— 저자, <cite>출처</cite></figcaption>
</figure>

author는 <cite> 바깥에 놓입니다. <cite>는 작품 제목을 위한 요소이기 때문입니다.

예시

variant

text가 기본으로, 여백에 선 하나만 두어 본문 흐름 안에 놓입니다. outline과 solid는 인용이 그 절의 중심일 때 쓰는 sheet 형태입니다.

import { Blockquote } from 'neba';

export default function BlockquoteVariants() {
  return (
    <div className="flex w-full max-w-lg flex-col gap-5">
      <Blockquote variant="text">
        The rule in the margin and nothing else, which is what a quote in running prose should be.
      </Blockquote>

      <Blockquote variant="outline">
        A hairline sheet under the words, for a quote that has to be found on a busy page.
      </Blockquote>

      <Blockquote variant="solid">
        The frosted sheet, for a pull quote that is the point of the section rather than an aside
        inside it.
      </Blockquote>
    </div>
  );
}

author와 source

author만, source만, 또는 둘 다 줄 수 있습니다. cite는 인용 출처 문서의 URL이며 <blockquote>의 cite 속성으로 전달됩니다. 화면에는 나타나지 않고 기계만 읽습니다.

import { Blockquote } from 'neba';

export default function BlockquoteAttribution() {
  return (
    <div className="flex w-full max-w-lg flex-col gap-6">
      {/* Nothing at all: a plain `<blockquote>`. */}
      <Blockquote variant="outline">Make it work, make it right, make it fast.</Blockquote>

      {/* A person. */}
      <Blockquote variant="outline" author="Kent Beck">
        Make it work, make it right, make it fast.
      </Blockquote>

      {/* A person and the work it came from, with a machine-readable URL. */}
      <Blockquote
        variant="outline"
        author="Kent Beck"
        source="Extreme Programming Explained"
        cite="https://example.com/xp"
      >
        Make it work, make it right, make it fast.
      </Blockquote>
    </div>
  );
}

color

인용문의 배경은 물들지 않습니다. color는 여백의 선과 인용부호에만 적용됩니다.

import { Blockquote } from 'neba';

const families = ['primary', 'success', 'warning', 'danger'] as const;

export default function BlockquoteColors() {
  return (
    <div className="flex w-full max-w-lg flex-col gap-4">
      {families.map((color) => (
        <Blockquote key={color} color={color} variant="outline" size="sm" icon={false}>
          The sheet stays undyed whatever the family is — the colour is in the rule and the mark.
        </Blockquote>
      ))}
    </div>
  );
}

icon

icon은 세 가지로 동작합니다. 생략하면 기본 인용부호 글리프, node를 넘기면 그것으로 교체, false를 주면 표시하지 않습니다.

<Blockquote>기본 인용부호</Blockquote>
<Blockquote icon={<QuoteIcon />}>직접 지정한 글리프</Blockquote>
<Blockquote icon={false}>글리프 없음</Blockquote>