added basics of filtering and sorting

keypom · Feb 21, 2024 · cf5e556 · cf5e556
1 parent a5dadd2
commit cf5e556
Show file tree

Hide file tree

Showing 4 changed files with 329 additions and 151 deletions.
diff --git a/src/components/Icons/CheckedIcon.tsx b/src/components/Icons/CheckedIcon.tsx
@@ -5,7 +5,7 @@ interface CheckedIconProps extends IconProps {
   isChecked?: boolean;
 }
 
-export const CheckedIcon = ({ isIndeterminate, isChecked, ...props }: CheckedIconProps) => {
+export const CheckedIcon = ({ isIndeterminate, isChecked = true, ...props }: CheckedIconProps) => {
   return (
     <Icon
       fill="none"
@@ -15,14 +15,21 @@ export const CheckedIcon = ({ isIndeterminate, isChecked, ...props }: CheckedIco
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <rect fill="#30C9F3" height="17" rx="5.5" width="17" x="0.5" y="0.5" />
+      <rect fill={isChecked && '#30C9F3'} height="17" rx="5.5" width="17" x="0.5" y="0.5" />
       <path
         d="M13 6.19922L7.4 11.7992L5 9.39922"
-        stroke="white"
+        stroke={isChecked ? 'white' : '#9E9E9E'} // Adjust the stroke of the checkmark based on isChecked
         strokeLinecap="round"
         strokeWidth="1.5"
       />
-      <rect height="17" rx="5.5" stroke="#30C9F3" width="17" x="0.5" y="0.5" />
+      <rect
+        height="17"
+        rx="5.5"
+        stroke={isChecked ? '#30C9F3' : '#9E9E9E'} // Use #9E9E9E for the border when not checked
+        width="17"
+        x="0.5"
+        y="0.5"
+      />
     </Icon>
   );
 };