40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
import classNames from 'classnames';
|
|
import {StyleColorVariants, StyleColorVariantsMap} from 'core/_variants';
|
|
import React from 'react';
|
|
|
|
type Props = {
|
|
variant: StyleColorVariants;
|
|
children: React.ReactNode;
|
|
};
|
|
|
|
const markerVariant: StyleColorVariantsMap<string> = {
|
|
gray: 'bg-gray-500 shadow-gray-500',
|
|
blue: 'bg-blue-500 shadow-blue-500',
|
|
pink: 'bg-pink-500 shadow-pink-500',
|
|
red: 'bg-red-500 shadow-red-500',
|
|
purple: 'bg-purple-500 shadow-purple-500',
|
|
yellow: 'bg-yellow-500 shadow-yellow-500',
|
|
emerald: 'bg-emerald-500 shadow-emerald-500',
|
|
sky: 'bg-sky-500 shadow-sky-500',
|
|
"dark-coral": "bg-dark-coral-500 shadow-dark-coral-500",
|
|
};
|
|
|
|
/**
|
|
* Cirlce shape to wrap [children]
|
|
* @param {React.ReactNode} children Children to paste inside circle shape
|
|
* @param {StyleColorVariants} variant Varant of marker
|
|
* @return {JSX.Element}
|
|
*/
|
|
export default function CircleMarker({variant, children}: Props) {
|
|
return (
|
|
<div
|
|
className={classNames([
|
|
'w-11 h-11 rounded-full shadow-xl flex items-center justify-center p-3',
|
|
markerVariant[variant],
|
|
])}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|