<script lang="ts">
	import { draw } from 'svelte/transition';
	import TopbarButton from './topbar_button.svelte';
	export let showSettings: boolean;
</script>

<TopbarButton action={() => (showSettings = true)} active={showSettings} title={'show settings'}>
	<svg
		xmlns="http://www.w3.org/2000/svg"
		fill="none"
		viewBox="0 0 24 24"
		stroke-width="1.2"
		stroke="currentColor"
		class="w-6 h-6"
	>
		<path
			in:draw={{ duration: 500 }}
			stroke-linecap="round"
			stroke-linejoin="round"
			d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75"
		/>
	</svg>
</TopbarButton>
