webamp/js/components/Character.tsx
2018-09-17 17:04:05 -07:00

32 lines
654 B
TypeScript

import React from "react";
interface Props {
children: string | number;
className?: string;
}
export const characterClassName = (char: string | number) =>
`character-${char
.toString()
.toLowerCase()
.charCodeAt(0)}`;
const Character = ({
children: char,
className,
...passThrough
}: Props &
// TODO: Seems like there should be a better way to do pass through props
React.DetailedHTMLProps<
React.HTMLAttributes<HTMLSpanElement>,
HTMLSpanElement
>) => (
<span
{...passThrough}
className={`${className || ""} character ${characterClassName(char)}`}
>
{char}
</span>
);
export default Character;