chore: add basic feature data toggle component

agrc · Nov 14, 2024 · 16cb84a · 16cb84a
1 parent 1d7e5a4
commit 16cb84a
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 23 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -83,6 +83,11 @@ export default function App() {
             <div className="flex flex-col gap-4 rounded border border-zinc-200 p-3 dark:border-zinc-700">
               <ErrorBoundary FallbackComponent={ErrorFallback}>
                 <h5 className="dark:text-zinc-200">Feature Type</h5>
+                {featureLayers.length > 0 ? (
+                  <FeatureData layers={featureLayers} featureTypes={featureTypes} />
+                ) : (
+                  <TagGroupLoader />
+                )}
               </ErrorBoundary>
             </div>
             <div className="flex flex-col gap-4 rounded border border-zinc-200 p-3 dark:border-zinc-700">

diff --git a/src/components/FeatureData.tsx b/src/components/FeatureData.tsx
@@ -2,30 +2,13 @@ import Collection from '@arcgis/core/core/Collection.js';
 import { Button, Tag, TagGroup } from '@ugrc/utah-design-system';
 import { useEffect, useState } from 'react';
 import { type Selection } from 'react-aria-components';
-import { tv } from 'tailwind-variants';
-import { ProjectStatus } from './data/filters';
+import { type FeatureType } from './data/filters';
 import { areSetsEqual } from './utils';
 
 const defaultState = new Set(['Proposed', 'Current', 'Pending Completed', 'Completed']);
 const all = '';
 const none = '1=0';
 
-const tagStyles = tv({
-  variants: {
-    status: {
-      draft: 'data-[selected]:bg-zinc-500 data-[selected]:hover:border-zinc-700 data-[selected]:border-gray-200',
-      proposed: 'data-[selected]:bg-zinc-800 data-[selected]:hover:border-zinc-900 data-[selected]:border-gray-200',
-      current: 'data-[selected]:bg-sky-600 data-[selected]:hover:border-sky-800 data-[selected]:border-gray-200',
-      'pending completed':
-        'data-[selected]:bg-yellow-500 data-[selected]:hover:border-yellow-600 data-[selected]:border-gray-200',
-      completed: 'data-[selected]:bg-green-700 data-[selected]:hover:border-green-900 data-[selected]:border-gray-200',
-      cancelled: 'data-[selected]:bg-red-700 data-[selected]:hover:border-red-900 data-[selected]:border-gray-200',
-    },
-  },
-});
-
-type Status = keyof typeof tagStyles.variants.status;
-
 const setDefinitionExpression = (layers: Collection<__esri.FeatureLayer>, keys: Selection) =>
   layers
     .filter((x) => x.id.startsWith('feature'))
@@ -51,10 +34,10 @@ const setDefinitionExpression = (layers: Collection<__esri.FeatureLayer>, keys:
 
 export const FeatureData = ({
   layers,
-  status,
+  featureTypes,
 }: {
   layers: __esri.Collection<__esri.FeatureLayer>;
-  status: ProjectStatus[];
+  featureTypes: FeatureType[];
 }) => {
   const [selected, setSelected] = useState<Selection>(defaultState);
 
@@ -66,9 +49,9 @@ export const FeatureData = ({
   return (
     <>
       <TagGroup selectionMode="multiple" selectedKeys={selected} onSelectionChange={setSelected}>
-        {status.map(({ code, value }) => (
-          <Tag id={value} key={code} textValue={value} className={tagStyles({ status: value.toLowerCase() as Status })}>
-            {value}
+        {featureTypes.map(({ code, featureType }) => (
+          <Tag id={featureType} key={code} textValue={featureType}>
+            {featureType}
           </Tag>
         ))}
       </TagGroup>