components/tag.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

import { CSSProperties } from 'react';

export default function Tags(props: {
	tags: Array<string>;
}) {
	return <div className='tags'>
		<span>Tags:</span>
		{props.tags.map(tag => <Tag key={Math.random().toString()} name={tag} />)}
	</div>;
}

export function Tag(props: {
	name: string;
}) {
	return <a
		className='tag'
		href={'/search?q=' + props.name}
		style={{
			'--tag-hue': props.name
				.split('')
				.map(char => char.charCodeAt(0))
				.reduce((a, b) => a + b)
				% 360,
		} as CSSProperties}
	>
		{props.name}
	</a>;
}