wip

Author: jer3m01

src/ui/layout/theme-selector.tsx

@@ -11,24 +11,42 @@ import { Icon } from "solid-heroicons";
 interface ThemeOption {
 	value: ThemeType | "system";
 	label: string;
-	icon: { path: JSX.Element; outline: boolean; mini: boolean };
+	icon: (cls: string) => JSX.Element;
 }
 
 const THEME_OPTIONS: ThemeOption[] = [
 	{
 		value: "light",
 		label: "Light",
-		icon: sun,
+		icon: (cls: string) => (
+      <Icon
+				class={cls}
+				path={sun}
+        aria-hidden
+			/>
+    ),
 	},
 	{
 		value: "dark",
 		label: "Dark",
-		icon: moon,
+    icon: (cls: string) => (
+      <Icon
+				class={cls}
+				path={moon}
+        aria-hidden
+			/>
+    ),
 	},
 	{
 		value: "system",
 		label: "System",
-		icon: computerDesktop,
+		icon: (cls: string) => (
+      <Icon
+				class={cls}
+				path={computerDesktop}
+        aria-hidden
+			/>
+    ),
 	},
 ];
 
@@ -55,10 +73,7 @@ export const ThemeSelector: Component = () => {
 					item={props.item}
 				>
 					<Select.ItemLabel>
-						<Icon
-							class="inline-block h-6 w-6 mr-2 rounded-md bg-white p-1 shadow ring-1 ring-slate-900/5 dark:bg-slate-700 dark:ring-inset dark:ring-white/5 fill-slate-700 dark:fill-slate-200 kb-selected:fill-slate-800 kb-selected:dark:fill-white"
-							path={props.item.rawValue.icon}
-						/>
+            {props.item.rawValue.icon("inline-block h-6 w-6 mr-2 rounded-md bg-white p-1 shadow ring-1 ring-slate-900/5 dark:bg-slate-700 dark:ring-inset dark:ring-white/5 fill-slate-700 dark:fill-slate-200 kb-selected:fill-slate-800 kb-selected:dark:fill-white")}
 						<span
 							class="prose prose-slate text-sm group-hover:dark:text-white text-slate-700 dark:text-slate-300 kb-selected:text-blue-500 kb-selected:group-hover:dark:text-white"
 						>
@@ -72,10 +87,7 @@ export const ThemeSelector: Component = () => {
 				<Select.Value<ThemeOption>>
 					{(state) => (
 						<RefreshOnMount aria-label={state.selectedOption().label}>
-							<Icon
-								class="w-4 h-4 fill-slate-700 dark:fill-slate-200"
-								path={state.selectedOption().icon}
-							/>
+              {state.selectedOption().icon("w-4 h-4 fill-slate-700 dark:fill-slate-200")}
 						</RefreshOnMount>
 					)}
 				</Select.Value>
@@ -99,7 +111,7 @@ function RefreshOnMount(props: ComponentProps<"div">) {
 	});
 
 	return (
-		<Show when={refresh()} fallback={<div {...props}><div>{resolved()}</div></div>} keyed>
+		<Show when={refresh()} fallback={<div {...props}>{resolved()}</div>} keyed>
 			<div {...props}>{resolved()}</div>
 		</Show>
 	);