Sources

Una lista plegada con las citas detrás de una respuesta, cada una con favicon, título y su dominio.

1'use client';
2
3import { Sources } from '@/components/ui/sources';
4
5export function Default() {
6  return (
7    <div className="w-full max-w-md">
8      <Sources>
9        <Sources.Trigger />
10        <Sources.Content>
11          <Sources.Item href="https://react.dev/reference/react/use" title="use – React" />
12          <Sources.Item
13            href="https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/"
14            title="Disclosure pattern – ARIA Authoring Practices Guide"
15          />
16          <Sources.Item
17            href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details"
18            title="<details>: The Details disclosure element – MDN"
19          />
20        </Sources.Content>
21      </Sources>
22    </div>
23  );
24}

Instalación

pnpm dlx nachui add sources

Anatomía

1import { Sources } from '@/components/ui/sources';

1<Sources>
2  <Sources.Trigger />
3  <Sources.Content>
4    <Sources.Item href="https://react.dev/reference/react/use" title="use – React" />
5    <Sources.Item href="https://www.w3.org/WAI/ARIA/apg/" title="ARIA Authoring Practices" />
6  </Sources.Content>
7</Sources>

Las fuentes arrancan cerradas. El trigger cuenta los ítems solo y dice "Used 2 sources", así la respuesta mantiene su forma y las citas quedan a un click.

Composición

Usá la siguiente composición para construir Sources:

Sources
├── Sources.Trigger
└── Sources.Content
    └── Sources.Item

Abierto por defecto

Pasá defaultOpen cuando las citas son lo importante, por ejemplo en una vista de investigación. Cada ítem saca el dominio del href y busca un favicon para ese dominio; favicon reemplaza esa imagen o la saca con null.

App Router – Next.jsnextjs.org

Theme variables – Tailwindtailwindcss.com

AnimatePresence – Motionmotion.dev

Getting started – Vitestvitest.dev

tsconfig reference – TypeScripttypescriptlang.org

1'use client';
2
3import { Sources } from '@/components/ui/sources';
4
5export function Open() {
6  return (
7    <div className="w-full max-w-md">
8      <Sources defaultOpen>
9        <Sources.Trigger />
10        <Sources.Content>
11          <Sources.Item href="https://nextjs.org/docs/app" title="App Router – Next.js" />
12          <Sources.Item
13            href="https://tailwindcss.com/docs/theme"
14            title="Theme variables – Tailwind"
15          />
16          <Sources.Item
17            href="https://motion.dev/docs/react-animate-presence"
18            title="AnimatePresence – Motion"
19          />
20          <Sources.Item href="https://vitest.dev/guide/" title="Getting started – Vitest" />
21          <Sources.Item
22            href="https://www.typescriptlang.org/tsconfig/"
23            title="tsconfig reference – TypeScript"
24          />
25        </Sources.Content>
26      </Sources>
27    </div>
28  );
29}

Etiquetas

label en el trigger recibe la cantidad y devuelve el texto, y ahí van las traducciones. Pasale children al trigger para reemplazar la etiqueta entera. Cuando la cantidad de ítems no es la cantidad de citas, por ejemplo porque la lista está paginada, poné count en la raíz.

Referencia de API

Sources

Prop	Type	Default	Description
`defaultOpen`	`boolean`	`false`	Estado abierto cuando no está controlado
`open`	`boolean`	-	Estado abierto controlado
`onOpenChange`	`(open: boolean) => void`	-	Se llama cuando cambia el estado
`count`	`number`	-	Número que muestra el trigger, por defecto los ítems
`className`	`string`	-	Clases CSS adicionales

Sources.Trigger

Prop	Type	Default	Description
`label`	`(count: number) => string`	`Used N sources`	Arma la etiqueta a partir de la cantidad
`children`	`ReactNode`	-	Reemplaza la etiqueta cuando se pasa
`className`	`string`	-	Clases CSS adicionales

Sources.Content

Prop	Type	Default	Description
`className`	`string`	-	Clases CSS adicionales

Sources.Item

Prop	Type	Default	Description
`href`	`string`	-	Link a la fuente, abre en una pestaña nueva
`title`	`string`	-	Texto de la cita
`favicon`	`string \| null`	Favicon de Google	Imagen junto al título, `null` la oculta
`children`	`ReactNode`	-	Reemplaza el título cuando se pasa
`className`	`string`	-	Clases CSS adicionales

sourceHost

sourceHost(href) devuelve el dominio de una URL sin el prefijo www., y el texto sin cambios cuando no es una URL.

¿Encontraste algo que mejorar?

¿Notaste un error, tipografía o detalle faltante en esta página? Ayúdanos a mejorar la documentación abriendo un issue en GitHub.

Crear un Issue

AnteriorShimmer

SiguienteSuggestion