32 lines
1.3 KiB
Svelte
32 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
export let state;
|
|
let color = state === "active" ? "#0076FE" : "#D6D6DC";
|
|
</script>
|
|
|
|
<div
|
|
class="flex justify-center items-center {state === 'active'
|
|
? 'text-[#0076FE] bg-[#31304D] lg:bg-inherit'
|
|
: 'text-[#A6ADBB]'} rounded-md w-8 h-8 relative"
|
|
>
|
|
<svg
|
|
class="lg:hidden inline-block w-4 h-4"
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 512.171 512.171"
|
|
xml:space="preserve"
|
|
><path
|
|
fill="currentColor"
|
|
d="M479.046,283.925c-1.664-3.989-5.547-6.592-9.856-6.592H352.305V10.667C352.305,4.779,347.526,0,341.638,0H170.971 c-5.888,0-10.667,4.779-10.667,10.667v266.667H42.971c-4.309,0-8.192,2.603-9.856,6.571c-1.643,3.989-0.747,8.576,2.304,11.627 l212.8,213.504c2.005,2.005,4.715,3.136,7.552,3.136s5.547-1.131,7.552-3.115l213.419-213.504 C479.793,292.501,480.71,287.915,479.046,283.925z"
|
|
></path></svg
|
|
>
|
|
<svg
|
|
class="hidden lg:block cursor-pointer inline-block w-9 h-9 hover:text-[#fff] text-[#5C5C5C]"
|
|
fill={state === "active" ? color : "currentColor"}
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
><path
|
|
d="M17.9188 8.17969H11.6888H6.07877C5.11877 8.17969 4.63877 9.33969 5.31877 10.0197L10.4988 15.1997C11.3288 16.0297 12.6788 16.0297 13.5088 15.1997L15.4788 13.2297L18.6888 10.0197C19.3588 9.33969 18.8788 8.17969 17.9188 8.17969Z"
|
|
/></svg
|
|
>
|
|
</div>
|