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

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>
}