63 lines
1.7 KiB
TypeScript
63 lines
1.7 KiB
TypeScript
import { JSX, JSXElement } from 'solid-js';
|
|
import { COLORS } from 'src/colors';
|
|
|
|
type SSChipBaseProps = {
|
|
children: JSXElement;
|
|
color?: (typeof COLORS)[number];
|
|
class?: string;
|
|
style?: string;
|
|
};
|
|
|
|
type SSChipClickableProps = {
|
|
onclick: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;
|
|
ondismiss?: never;
|
|
};
|
|
|
|
type SSChipDismissableProps = {
|
|
ondismiss: () => void;
|
|
onclick?: never;
|
|
};
|
|
|
|
type SSChipDisplayProps = {
|
|
onclick?: never;
|
|
ondismiss?: never;
|
|
};
|
|
|
|
type SSChipProps = SSChipBaseProps &
|
|
(SSChipClickableProps | SSChipDismissableProps | SSChipDisplayProps);
|
|
|
|
function SSChip(props: SSChipProps) {
|
|
const commonClass = `ss_chip ss_chip--${props.color ?? 'blue'} ${props.class ?? ''}`;
|
|
|
|
if ('onclick' in props && props.onclick) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
class={`${commonClass} ss_chip--clickable`}
|
|
style={props.style}
|
|
onclick={props.onclick}
|
|
>
|
|
<span class="ss_chip__label">{props.children}</span>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div class={commonClass} style={props.style}>
|
|
<span class="ss_chip__label">{props.children}</span>
|
|
{'ondismiss' in props && props.ondismiss && (
|
|
<button
|
|
type="button"
|
|
class="ss_chip__dismiss"
|
|
aria-label="Entfernen"
|
|
onclick={props.ondismiss}
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-x"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export { SSChip };
|