Moderated comment

Comentarios anónimos. Siempre con equipo, día y ánimo; los marcados por la moderación se ocultan para revisar.

Comentario anónimo con ánimo, equipo y fecha. La moderación tiene tres modos: Permisivo, Cauteloso y Estricto. El componente muestra el estado que recibe, no modera. El producto analiza después de guardar: un comentario puede verse brevemente antes de ser marcado. En la app se usa la variante quote en la tarjeta Comentarios de Inicio; la variante card no aparece hoy en el dashboard.

Instalación

shadcn

npx shadcn@latest add https://design.moodinary.com/r/moderated-comment.json

import

import { ModeratedComment } from "@moodinary/ui/components/moderated-comment";
import { CommentQuote } from "@moodinary/ui/components/comment-quote";

Ejemplos

Tarjeta Comentarios

Como en Inicio: hasta dos comentarios ya revisados, tag Moderados y la aclaración de anonimato. Equipo y fecha llevan a Pulsos filtrado.

Comentarios

ModeradosVer pulsos →

Por fin se ordenaron los turnos, se nota.
Administración · 5 oct
Muchas entregas juntas esta semana.
5.º B · 2 oct

Anónimos. Solo mostramos comentarios revisados de equipos con 5 pulsos o más.

Código

moderated.tsx

import { ShieldCheck as ShieldCheckIcon } from "@moodinary/ui/components/icons";
import { ModeratedComment } from "@moodinary/ui/components/moderated-comment";
import { RailCard } from "@moodinary/ui/components/rail-card";

/* Tarjeta Comentarios de Inicio (inicio-rail.tsx): hasta 2 comentarios ya moderados, tag Moderados. */
export default function CommentModerated() {
	return (
		<RailCard
			action={
				<span className="flex items-center gap-2.5">
					<span className="inline-flex items-center gap-1 text-[11.5px] text-ink-3">
						<ShieldCheckIcon aria-hidden className="size-3" />
						Moderados
					</span>
					<a href="#pulsos">Ver pulsos →</a>
				</span>
			}
			className="w-[340px] max-w-full"
			title="Comentarios"
		>
			<ul className="m-0 grid list-none gap-3 p-0">
				<li>
					<ModeratedComment
						level={4}
						team={<a href="#pulsos">Administración</a>}
						variant="quote"
						when={<a href="#pulsos">5 oct</a>}
					>
						Por fin se ordenaron los turnos, se nota.
					</ModeratedComment>
				</li>
				<li>
					<ModeratedComment
						level={2}
						team={<a href="#pulsos">5.º B</a>}
						variant="quote"
						when={<a href="#pulsos">2 oct</a>}
					>
						Muchas entregas juntas esta semana.
					</ModeratedComment>
				</li>
			</ul>
			<p className="m-0 text-ink-3 text-xs">
				Anónimos. Solo mostramos comentarios revisados de equipos con 5 pulsos o
				más.
			</p>
		</RailCard>
	);
}

Sin comentarios

Estado vacío real de la tarjeta. hidden (solo en card) desenfoca visualmente: no protege contenido sensible ni reemplaza permisos.

Comentarios

ModeradosVer pulsos →

Todavía no hay comentarios para mostrar.

Anónimos. Solo mostramos comentarios revisados de equipos con 5 pulsos o más.

Código

review.tsx

import { ShieldCheck as ShieldCheckIcon } from "@moodinary/ui/components/icons";
import { RailCard } from "@moodinary/ui/components/rail-card";

/* Estado vacío real de la tarjeta Comentarios: todavía no hay comentarios moderados para mostrar. */
export default function CommentReview() {
	return (
		<RailCard
			action={
				<span className="flex items-center gap-2.5">
					<span className="inline-flex items-center gap-1 text-[11.5px] text-ink-3">
						<ShieldCheckIcon aria-hidden className="size-3" />
						Moderados
					</span>
					<a href="#pulsos">Ver pulsos →</a>
				</span>
			}
			className="w-[340px] max-w-full"
			title="Comentarios"
		>
			<p className="m-0 text-ink-3 text-xs">
				Todavía no hay comentarios para mostrar.
			</p>
			<p className="m-0 text-ink-3 text-xs">
				Anónimos. Solo mostramos comentarios revisados de equipos con 5 pulsos o
				más.
			</p>
		</RailCard>
	);
}

Cita compacta

La variante quote lleva la cita primero y el contexto debajo, con fecha corta. CommentQuote agrega sus propias comillas.

Me gustó que nos preguntaran cómo llegábamos antes de la prueba.
4.º A · 5 oct
La semana estuvo pesada, pero el equipo se bancó.
Ventas · 3 oct

Código

quote.tsx

import { ModeratedComment } from "@moodinary/ui/components/moderated-comment";

/* variant="quote" como en RecentComments (inicio-rail.tsx): equipo y fecha corta son links a Pulsos filtrado. */
export default function CommentQuoteVariant() {
	return (
		<ul className="m-0 grid w-[320px] max-w-full list-none gap-3 p-0">
			<li>
				<ModeratedComment
					level={4}
					team={<a href="#pulsos">4.º A</a>}
					variant="quote"
					when={
						<a href="#pulsos" title="Ver pulsos de ese día">
							5 oct
						</a>
					}
				>
					Me gustó que nos preguntaran cómo llegábamos antes de la prueba.
				</ModeratedComment>
			</li>
			<li>
				<ModeratedComment
					level={3}
					team={<a href="#pulsos">Ventas</a>}
					variant="quote"
					when={
						<a href="#pulsos" title="Ver pulsos de ese día">
							3 oct
						</a>
					}
				>
					La semana estuvo pesada, pero el equipo se bancó.
				</ModeratedComment>
			</li>
		</ul>
	);
}

Props