back round 0 view raw

collection filter styling #4

closed

opened by

futur.blue 3 months ago targeting main from futur.blue/pdsls: filter-styling

preview: https://github.com/user-attachments/assets/6281c46d-eccf-4900-9d71-6027d447fa96

options

unified split

Changed files

+7 -5

src

components

button.tsx

views

collection.tsx

+3 -1

src/components/button.tsx

···

       2
       2
        
       

     

       3
       3
        
       export interface ButtonProps {

     

       4
       4
        
         class?: string;

     

       5
       5
       +
         classList?: Record<string, boolean | undefined>;

     

       5
       6
        
         onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;

     

       6
       7
        
         children?: JSX.Element;

     

       7
       8
        
       }

     
···

       12
       13
        
             type="button"

     

       13
       14
        
             class={

     

       14
       15
        
               props.class ??

     

       15
       15
       -
               "dark:hover:bg-dark-100 dark:bg-dark-300 dark:shadow-dark-800 dark:active:bg-dark-100 flex items-center gap-1 rounded-lg bg-white px-2 py-1.5 text-xs font-semibold shadow-sm hover:bg-neutral-50 active:bg-neutral-50"

     

       16
       16
       +
               "dark:hover:bg-dark-100 dark:bg-dark-300 dark:shadow-dark-800 dark:active:bg-dark-100 flex items-center gap-1 rounded-lg bg-white px-2 py-1.5 text-xs font-semibold border-[0.5px] border-neutral-300 dark:border-neutral-700 shadow-md  hover:bg-neutral-50 active:bg-neutral-50"

     

       16
       17
        
             }

     

       18
       18
       +
             classList={props.classList}

     

       17
       19
        
             onClick={props.onClick}

     

       18
       20
        
           >

     

       19
       21
        
             {props.children}

+4 -4

src/views/collection.tsx

···

       159
       159
        
             true,

     

       160
       160
        
           );

     

       161
       161
        
       

     

       162
       162
       -
         const NavigationButton = (props: ButtonProps) => {

     

       162
       162
       +
         const FilterButton = (props: ButtonProps) => {

     

       163
       163
        
       	return <Button

     

       164
       164
        
       	    class="flex items-center gap-1 rounded-lg bg-white px-2 py-1.5 text-xs font-semibold border-[0.5px] border-neutral-300 dark:border-neutral-700 shadow-md"

     

       165
       165
        
       		classList={{

     
···

       266
       266
        
                 </div>

     

       267
       267
        
                 <Show when={records.length > 1}>

     

       268
       268
        
                   <div class="flex w-[22rem] items-center justify-between gap-x-2 sm:w-[24rem]">

     

       269
       269
       -
                     <NavigationButton

     

       269
       269
       +
                     <FilterButton

     

       270
       270
        
                       onClick={() => {

     

       271
       271
        
                         setReverse(!reverse());

     

       272
       272
        
                         setRecords([]);

     
···

       278
       278
        
                         class={`iconify ${reverse() ? "lucide--rotate-ccw" : "lucide--rotate-cw"} text-sm`}

     

       279
       279
        
                       ></span>

     

       280
       280
        
                       Reverse

     

       281
       281
       -
                     </NavigationButton>

     

       281
       281
       +
                     </FilterButton>

     

       282
       282
        
                     <div>

     

       283
       283
        
                       <Show when={batchDelete()}>

     

       284
       284
        
                         <span>{records.filter((rec) => rec.toDelete).length}</span>

     
···

       289
       289
        
                     <div class="flex w-[5rem] items-center justify-end">

     

       290
       290
        
                       <Show when={cursor()}>

     

       291
       291
        
                         <Show when={!response.loading}>

     

       292
       292
       -
                           <NavigationButton onClick={() => refetch()}>Load More</NavigationButton>

     

       292
       292
       +
                           <FilterButton onClick={() => refetch()}>Load More</FilterButton>

     

       293
       293
        
                         </Show>

     

       294
       294
        
                         <Show when={response.loading}>

     

       295
       295
        
                           <div class="iconify lucide--loader-circle w-[5rem] animate-spin text-xl" />