fixes to toolbar

themesberg · Dec 30, 2023 · 0910f57 · 0910f57
1 parent f0b3d9c
commit 0910f57
Showing 1 changed file with 14 additions and 27 deletions.
diff --git a/src/lib/toolbar/Toolbar.svelte b/src/lib/toolbar/Toolbar.svelte
@@ -1,45 +1,32 @@
 <script lang="ts">
-  import type { ToolbarColorType } from '../types';
+  import Frame from '$lib/utils/Frame.svelte';
   import { setContext, type ComponentProps } from 'svelte';
   import { writable } from 'svelte/store';
-  import { twMerge, twJoin } from 'tailwind-merge';
-  import Frame from '$lib/utils/Frame.svelte';
+  import { twJoin, twMerge } from 'tailwind-merge';
 
   interface $$Props extends ComponentProps<Frame> {
-    color: 'gray' | 'red' | 'yellow' | 'green' | 'indigo' | 'purple' | 'pink' | 'blue' | 'dark' | 'none';
-    embedded: boolean;
+    embedded?: boolean;
   }
 
+  export let embedded: boolean = false;
+
   const separators = writable(false);
   setContext('toolbar', separators);
 
-  export let color: ToolbarColorType = 'dark';
-  export let embedded: boolean = false;
-
-  let divClass: string;
-  $: divClass = twMerge('flex justify-between items-center', embedded && 'p-2', $$props.class);
-
-  const divideColors = {
-    gray: 'divide-gray-400 dark:divide-gray-700',
-    red: 'divide-red-400 dark:divide-red-700',
-    yellow: 'divide-yellow-400 dark:divide-yellow-700',
-    green: 'divide-green-400 dark:divide-green-700',
-    indigo: 'divide-indigo-400 dark:divide-indigo-700',
-    purple: 'divide-purple-400 dark:divide-purple-700',
-    pink: 'divide-pink-400 dark:divide-pink-700',
-    blue: 'divide-blue-400 dark:divide-blue-700',
-    dark: 'divide-gray-400 dark:divide-gray-600',
-    none: ''
-  };
+  let color: $$Props['color'];
+  $: color = embedded ? 'none' : $$props.color;
 
   let separatorsClass: string;
-  $: separatorsClass = twJoin($separators && 'sm:divide-x rtl:divide-x-reverse', divideColors[color]);
+  $: separatorsClass = twJoin($separators && 'sm:divide-x rtl:divide-x-reverse');
+
+  let divClass: string;
+  $: divClass = twMerge('flex justify-between items-center', !embedded && 'py-2 px-3', $$props.class);
 </script>
 
-<Frame {...$$restProps} class={divClass} color={embedded ? 'none' : color} rounded={!embedded}>
-  <div class="flex flex-wrap items-center {separatorsClass}">
+<Frame {...$$restProps} class={divClass} {color} rounded={!embedded}>
+  <Frame class="flex flex-wrap items-center {separatorsClass}" {color} rounded={!embedded}>
     <slot />
-  </div>
+  </Frame>
   <slot name="end" />
 </Frame>