antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-13 07:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

filter indicator

Browse Source
This commit is contained in:
Anton Tranelis 2024-07-21 12:23:50 +02:00
parent ed3446dc13
commit c4ae29411f
1 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/Components/Map/Subcomponents/Controls/FilterControl.tsx
View File

@ -1,7 +1,6 @@
import * as React from 'react' import * as React from 'react'
import * as L from 'leaflet' import * as L from 'leaflet'
import { useLayers } from '../../hooks/useLayers'; import { useAddVisibleGroupType, useIsGroupTypeVisible, useToggleVisibleGroupType, useVisibleGroupType } from '../../hooks/useFilter';
import { useAddVisibleGroupType, useIsGroupTypeVisible, useToggleVisibleGroupType } from '../../hooks/useFilter';
import { useEffect } from 'react'; import { useEffect } from 'react';
export function FilterControl() { export function FilterControl() {
@ -21,6 +20,7 @@ export function FilterControl() {
const isGroupTypeVisible = useIsGroupTypeVisible(); const isGroupTypeVisible = useIsGroupTypeVisible();
const toggleVisibleGroupType = useToggleVisibleGroupType(); const toggleVisibleGroupType = useToggleVisibleGroupType();
const addVisibleGroupType = useAddVisibleGroupType(); const addVisibleGroupType = useAddVisibleGroupType();
const visibleGroupTypes = useVisibleGroupType();
return ( return (
<div className="tw-card tw-bg-base-100 tw-shadow-xl tw-mt-2 tw-w-fit"> <div className="tw-card tw-bg-base-100 tw-shadow-xl tw-mt-2 tw-w-fit">
@ -40,6 +40,8 @@ export function FilterControl() {
</ul> </ul>
</div> </div>
: :
<div className="tw-indicator">
{visibleGroupTypes.length < groupTypes.length && <span className="tw-indicator-item tw-badge tw-badge-primary tw-h-4 tw-p-2 tw-translate-x-1/3 -tw-translate-y-1/3 tw-bg-[#DF4D39] tw-border-0"></span>}
<div className="tw-card-body hover:tw-bg-slate-300 tw-card tw-p-2 tw-h-10 tw-w-10 tw-transition-all tw-duration-300 hover:tw-cursor-pointer" onClick={() => { <div className="tw-card-body hover:tw-bg-slate-300 tw-card tw-p-2 tw-h-10 tw-w-10 tw-transition-all tw-duration-300 hover:tw-cursor-pointer" onClick={() => {
setOpen(true) setOpen(true)
}}> }}>
@ -47,9 +49,10 @@ export function FilterControl() {
<path strokeLinecap="round" strokeLinejoin="round" d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 0 1-.659 1.591l-5.432 5.432a2.25 2.25 0 0 0-.659 1.591v2.927a2.25 2.25 0 0 1-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 0 0-.659-1.591L3.659 7.409A2.25 2.25 0 0 1 3 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0 1 12 3Z" /> <path strokeLinecap="round" strokeLinejoin="round" d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 0 1-.659 1.591l-5.432 5.432a2.25 2.25 0 0 0-.659 1.591v2.927a2.25 2.25 0 0 1-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 0 0-.659-1.591L3.659 7.409A2.25 2.25 0 0 1 3 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0 1 12 3Z" />
</svg> </svg>
</div> </div>
</div>
} }
</div> </div >
) )
} }