back round 0 view raw

collection filter styling #4

closed
opened by futur.blue targeting main from futur.blue/pdsls: filter-styling
options
unified split
Changed files
+7 -5
src
components
button.tsx
views
collection.tsx
+3 -1
src/components/button.tsx
··· 2 3 export interface ButtonProps { 4 class?: string; 5 onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>; 6 children?: JSX.Element; 7 } ··· 12 type="button" 13 class={ 14 props.class ?? 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 } 17 onClick={props.onClick} 18 > 19 {props.children}
··· 2 3 export interface ButtonProps { 4 class?: string; 5 + classList?: Record<string, boolean | undefined>; 6 onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>; 7 children?: JSX.Element; 8 } ··· 13 type="button" 14 class={ 15 props.class ?? 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" 17 } 18 + classList={props.classList} 19 onClick={props.onClick} 20 > 21 {props.children}
+4 -4
src/views/collection.tsx
··· 159 true, 160 ); 161 162 - const NavigationButton = (props: ButtonProps) => { 163 return <Button 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 classList={{ ··· 266 </div> 267 <Show when={records.length > 1}> 268 <div class="flex w-[22rem] items-center justify-between gap-x-2 sm:w-[24rem]"> 269 - <NavigationButton 270 onClick={() => { 271 setReverse(!reverse()); 272 setRecords([]); ··· 278 class={`iconify ${reverse() ? "lucide--rotate-ccw" : "lucide--rotate-cw"} text-sm`} 279 ></span> 280 Reverse 281 - </NavigationButton> 282 <div> 283 <Show when={batchDelete()}> 284 <span>{records.filter((rec) => rec.toDelete).length}</span> ··· 289 <div class="flex w-[5rem] items-center justify-end"> 290 <Show when={cursor()}> 291 <Show when={!response.loading}> 292 - <NavigationButton onClick={() => refetch()}>Load More</NavigationButton> 293 </Show> 294 <Show when={response.loading}> 295 <div class="iconify lucide--loader-circle w-[5rem] animate-spin text-xl" />
··· 159 true, 160 ); 161 162 + const FilterButton = (props: ButtonProps) => { 163 return <Button 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 classList={{ ··· 266 </div> 267 <Show when={records.length > 1}> 268 <div class="flex w-[22rem] items-center justify-between gap-x-2 sm:w-[24rem]"> 269 + <FilterButton 270 onClick={() => { 271 setReverse(!reverse()); 272 setRecords([]); ··· 278 class={`iconify ${reverse() ? "lucide--rotate-ccw" : "lucide--rotate-cw"} text-sm`} 279 ></span> 280 Reverse 281 + </FilterButton> 282 <div> 283 <Show when={batchDelete()}> 284 <span>{records.filter((rec) => rec.toDelete).length}</span> ··· 289 <div class="flex w-[5rem] items-center justify-end"> 290 <Show when={cursor()}> 291 <Show when={!response.loading}> 292 + <FilterButton onClick={() => refetch()}>Load More</FilterButton> 293 </Show> 294 <Show when={response.loading}> 295 <div class="iconify lucide--loader-circle w-[5rem] animate-spin text-xl" />