oxen-website/components/TagBlock.tsx

30 lines
758 B
TypeScript

import React from 'react';
import classNames from 'classnames';
interface Props {
tag: string;
size?: 'small' | 'medium' | 'large';
classes?: string;
}
export function TagBlock(props: Props) {
const { tag, size = 'small', classes } = props;
const href = `/tag/${tag}`;
return (
<a
href={href}
style={{ width: 'min-content' }}
className={classNames(
'flex items-center cursor-pointer rounded-full whitespace-nowrap border border-secondary bg-secondary bg-opacity-25 text-primary font-thin',
size === 'small' && 'h-4 text-xs',
size === 'medium' && 'h-5 text-sm',
size === 'medium' && 'h-6 text-base',
classes,
)}
>
<span className="px-2">{tag}</span>
</a>
);
}