sort by

clean up

components/Explore/QuestChains.tsx

@@ -1,12 +1,12 @@
-import { Flex, Grid, HStack, Text, VStack } from '@chakra-ui/react';
+import { Flex, Grid, HStack, VStack } from '@chakra-ui/react';
 import { useState } from 'react';
 
 import { QuestChainTile } from '@/components/QuestChainTile';
 import { useQuestChainSearchForAllChains } from '@/hooks/useQuestChainSearchForAllChains';
 
 import { LoadingState } from '../LoadingState';
 import FilterDropdown from './FilterDropdown';
-import Sort from './Sort';
+import SortDropdown from './SortDropdown';
 
 export enum Category {
   All = 'All',
@@ -28,10 +28,21 @@ export enum Network {
   Arbitrum = 'Arbitrum',
   Gnosis = 'Gnosis',
 }
+
+export enum SortBy {
+  Popularity = 'Popularity',
+  Newest = 'Newest',
+  Oldest = 'Oldest',
+}
+
 export type Filter = Record<Category | Network, boolean>;
 
 const QuestChains: React.FC<{ onClose?: () => void }> = ({ onClose }) => {
-  const [sortBy, setSortBy] = useState('');
+  const [sortBy, setSortBy] = useState<Record<SortBy, boolean>>({
+    [SortBy.Popularity]: false,
+    [SortBy.Newest]: true,
+    [SortBy.Oldest]: false,
+  });
 
   const [categories, setCategories] = useState<Record<Category, boolean>>({
     [Category.All]: false,
@@ -85,7 +96,8 @@ const QuestChains: React.FC<{ onClose?: () => void }> = ({ onClose }) => {
             label="Networks"
           />
         </HStack>
-        <Sort sortBy={sortBy} setSortBy={setSortBy} />
+        <SortDropdown sortBy={sortBy} setSortBy={setSortBy} label="Sort by" />
+        {/* <Sort sortBy={sortBy} setSortBy={setSortBy} /> */}
       </Flex>
 
       <VStack w="full" gap={4} flex={1}>

components/Explore/SortDropdown.tsx

@@ -0,0 +1,77 @@
+import { ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons';
+import {
+  Button,
+  Checkbox,
+  Flex,
+  Popover,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+  Text,
+  useDisclosure,
+} from '@chakra-ui/react';
+
+import { SortBy } from './QuestChains';
+
+const SortDropdown: React.FC<{
+  sortBy: Record<SortBy, boolean>;
+  setSortBy: (value: Record<SortBy, boolean>) => void;
+  label: string;
+}> = ({ sortBy, setSortBy, label }) => {
+  const { onOpen, onClose, isOpen } = useDisclosure();
+
+  return (
+    <Popover
+      placement="bottom-start"
+      isOpen={isOpen}
+      onOpen={onOpen}
+      onClose={onClose}
+    >
+      <PopoverTrigger>
+        <Button
+          gap={3}
+          fontSize={14}
+          fontWeight="bold"
+          bgColor="whiteAlpha.100"
+          borderRadius={24}
+          // borderColor="transparent"
+        >
+          <Text>{label}</Text>
+          {isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent bgColor="#0F172A" maxW={200}>
+        {/* <PopoverArrow /> */}
+        <PopoverBody gap={2}>
+          <Flex direction="column" gap={3}>
+            {Object.keys(sortBy).map((item, index) => {
+              return (
+                <Flex justifyContent="space-between" key={index}>
+                  <Text fontSize="sm">{item}</Text>
+                  <Checkbox
+                    isChecked={sortBy[item as SortBy]}
+                    variant="circular"
+                    fontSize="xs"
+                    onChange={() =>
+                      setSortBy({
+                        ...sortBy,
+                        // set the item that was previously true to false
+                        [Object.keys(sortBy).find(
+                          key => sortBy[key as SortBy],
+                        ) as SortBy]: false,
+                        // set the item that was clicked to true
+                        [item as SortBy]: !sortBy[item as SortBy],
+                      })
+                    }
+                  />
+                </Flex>
+              );
+            })}
+          </Flex>
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default SortDropdown;

utils/checkbox.ts

@@ -0,0 +1,35 @@
+import { checkboxAnatomy } from '@chakra-ui/anatomy';
+import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react';
+
+const { definePartsStyle, defineMultiStyleConfig } =
+  createMultiStyleConfigHelpers(checkboxAnatomy.keys);
+
+const circular = definePartsStyle({
+  control: defineStyle({
+    rounded: 'full',
+    borderWidth: '1.5px',
+    padding: '0.5rem',
+    transform: 'scale(0.9)',
+  }),
+});
+
+const baseStyle = definePartsStyle({
+  control: {
+    borderWidth: '1.5px',
+    _checked: {
+      backgroundColor: 'transparent',
+      borderWidth: '1.5px',
+      color: 'white',
+      _hover: {
+        bg: 'transparent',
+        borderColor: 'white',
+      },
+      borderColor: 'white',
+    },
+  },
+});
+
+export const checkboxTheme = defineMultiStyleConfig({
+  baseStyle,
+  variants: { circular },
+});

utils/theme.ts

@@ -1,6 +1,8 @@
 import { extendTheme } from '@chakra-ui/react';
 import { css } from '@emotion/react';
 
+import { checkboxTheme } from './checkbox';
+
 const Input = {
   variants: {
     outline: {
@@ -126,24 +128,28 @@ export const theme = extendTheme({
     Input,
     Button,
     Form,
-    Checkbox: {
-      baseStyle: {
-        control: {
-          bg: 'transparent',
-          _checked: {
-            bg: 'transparent',
-            _hover: {
-              bg: 'transparent',
-              borderColor: 'white',
-            },
-            borderColor: 'white',
-          },
-          _hover: {
-            bg: 'transparent',
-          },
-        },
-      },
-    },
+    Checkbox: checkboxTheme,
+    // Checkbox: {
+    //   baseStyle: {
+    //     control: {
+    //       bg: 'transparent',
+    //       _checked: {
+    //         bg: 'transparent',
+    //         _hover: {
+    //           bg: 'transparent',
+    //           borderColor: 'white',
+    //           borderRadius: 'full',
+    //         },
+    //         borderColor: 'white',
+    //         borderRadius: 'full',
+    //       },
+    //       borderRadius: 'full',
+    //       _hover: {
+    //         bg: 'transparent',
+    //       },
+    //     },
+    //   },
+    // },
   },
 });