Browse Source

🛠️ Implemented Tag component

 Added a new Tag component for displaying taxonomy tags.
🚀 Ready to use in our Next.js project!
🎨 Styled for both light and dark themes.
📈 Supports optional tag count display.
main
John Doe 1 year ago
parent
commit
f20339c399
  1. 26
      src/shared/Tag.tsx

26
src/shared/Tag.tsx

@ -0,0 +1,26 @@
import { TaxonomyType } from "@/data/types";
import { Route } from "@/routers/types";
import Link from "next/link";
import React, { FC } from "react";
export interface TagProps {
className?: string;
tag: TaxonomyType;
hideCount?: boolean;
}
const Tag: FC<TagProps> = ({ className = "", tag, hideCount = false }) => {
return (
<Link
className={`nc-Tag inline-block bg-white text-sm text-neutral-6000 dark:text-neutral-300 py-2 px-3 rounded-lg border border-neutral-100 md:py-2.5 md:px-4 dark:bg-neutral-700 dark:border-neutral-700 hover:border-neutral-200 dark:hover:border-neutral-6000 ${className}`}
href={tag.href as Route}
>
{`${tag.name}`}
{!hideCount && (
<span className="text-xs font-normal"> ({tag.count})</span>
)}
</Link>
);
};
export default Tag;
Loading…
Cancel
Save