1import { type ComponentProps, splitProps } from "solid-js";
2import { Dynamic } from "solid-js/web";
3
4type AllowedTags = "div" | "a" | "span" | "button";
5
6export function IconWithText<T extends AllowedTags>(
7 props: {
8 type?: T;
9 icon: string;
10 text: string;
11 style?: string;
12 href?: string;
13 } & ComponentProps<T>,
14) {
15 const [local, dynamic] = splitProps(
16 props,
17 ["type", "icon", "text", "style"],
18 ["href"],
19 );
20
21 return (
22 <Dynamic
23 component={local.type || "span"}
24 class={`flex flex-row items-center gap-1 ${local.style || ""}`}
25 {...dynamic}
26 >
27 <div class={`iconify ${local.icon}`} />
28 <span>{local.text}</span>
29 </Dynamic>
30 );
31}