My personal website
renderg.host
1import { usePageTheme } from '@/components/Layout/Layout';
2import { cn } from '@/lib/utils';
3import React from 'react';
4import { Paragraph } from '../Paragraph/Paragraph';
5import { tagStyles } from './Tag.styles';
6import { TagProps } from './Tag.types';
7
8export const Tag: React.FC<TagProps> = ({ label, className = '' }) => {
9 const pageTheme = usePageTheme();
10
11 // Theme-based tag styling:
12 // Accent: white border with semi-transparent white background
13 // Default: light backgrounds with dark/light text based on mode
14 const themeClasses = pageTheme === 'accent'
15 ? 'border border-bones-white bg-bones-white-20 text-bones-white'
16 : 'bg-bones-black-5 text-bones-black dark:bg-bones-white-10 dark:text-bones-white';
17
18 return (
19 <div className={cn(tagStyles.base, themeClasses, className)}>
20 <Paragraph size="sm">{label}</Paragraph>
21 </div>
22 );
23};