Unique Values File - Copy this React, Tailwind Component to your project

Puedes-mejorar-la-experiencia-visual-de-este-componente-para-ver-los-datos-unicos-de-cada-columna-de-una-tabla:import-React-from-'react';-import-{-UniqueValues-}-from-'../../../interfaces/DataTransform';-type-Props-=-{-uniqueValues:-UniqueValues,-}-const-getDataRow-=-(valor:-undefined-|-Date-|-string-|-number)-=>-{-//console.log(`Valor:-${valor},-Tipo:-${typeof-valor}`);-if-(valor-===-undefined)-{-return-'N/A';-//-Retorna-un-valor-por-defecto-si-es-undefined-}-else-if-(valor-instanceof-Date)-{-return-valor.toLocaleDateString();-//-Formatea-la-fecha-a-un-formato-legible-}-else-if-(typeof-valor-===-'string')-{-return-valor;-//-Retorna-el-string-tal-cual-}-else-if-(typeof-valor-===-'number')-{-return-valor.toString();-//-Convierte-el-número-a-string-}-return-'';-//-En-caso-de-que-no-coincida-con-ninguno-de-los-tipos-esperados-};-const-UniqueValuesFile:-React.FC<Props>-=-({uniqueValues})-=>-{-return-(-<div-className="px-4">-<div-className="flex-flex-col-gap-6">-{Object.entries(uniqueValues).map(([column,-values])-=>-(-<ul-key={column}-className="bg-white-dark:bg-gray-700-rounded-lg-shadow-sm">-<li-className="flex-gap-4">-<h4-className="min-w-[200px]-text-lg-text-gray-600-dark:text-gray-200-font-medium-capitalize-mb-2">{column}</h4>-<div-className="flex-items-center-flex-wrap-gap-2">-{values.map((value,-index)-=>-(-<span-key={index}-className="-rounded-md-bg-white-px-4-py-1-text-xs-font-medium-text-gray-600-dark:text-gray-200-dark:bg-gray-700-ring-2-ring-inset-ring-gray-600/20-dark:ring-gray-500">{getDataRow(value)}</span>-))}-</div>-</li>-</ul>-))}-</div>-{Object.keys(uniqueValues).length-===-0-&&-<p-className="text-gray-600-dark:text-gray-200">There-are-not-values-in-the-columns-of-type-string-or-date.</p>}-</div>-)-}-export-default-UniqueValuesFile;