Update Airdrop page

quicksilver-zone · Dec 23, 2023 · c4d3f93 · c4d3f93
1 parent fab4393
commit c4d3f93
Showing 1 changed file with 54 additions and 23 deletions.
diff --git a/web-ui/components/Airdrop/airdropSection.tsx b/web-ui/components/Airdrop/airdropSection.tsx
@@ -14,16 +14,62 @@ import {
   HStack,
   useColorModeValue,
   Icon,
+  Badge,
+  useDisclosure,
 } from '@chakra-ui/react';
-import { CheckIcon, ChevronRightIcon, InfoOutlineIcon } from '@chakra-ui/icons';
+import { CheckIcon, ChevronDownIcon, ChevronRightIcon, InfoOutlineIcon } from '@chakra-ui/icons';
+import { useAccordionStyles } from '@chakra-ui/accordion';
+import { useState } from 'react';
+
+interface AirdropAccordionItemProps {
+  index: number;
+  defaultIsOpen?: boolean;
+}
+
+const AirdropAccordionItem: React.FC<AirdropAccordionItemProps> = ({ index, defaultIsOpen }) => {
+  const { isOpen, onToggle } = useDisclosure({ defaultIsOpen });
+
+  return (
+    <AccordionItem
+      mb="30px"
+      borderRadius={isOpen ? '20px 20px 0 0' : '20px'}
+      h="80px"
+      borderBottomColor={'transparent'}
+      zIndex={10 - index}
+      borderTopColor={'transparent'}
+      bgColor={'rgba(255, 128, 0, 1)'}
+      shadow={'md'}
+      position="relative"
+      _hover={{ bgColor: 'rgba(255, 128, 0, 0.9)' }}
+    >
+      <h2>
+        <AccordionButton onClick={onToggle} h="80px" justifyContent="space-between">
+          <Badge borderRadius="full" px={3} py={1.5} mr={3} colorScheme="orange">
+            {index + 1}
+          </Badge>
+          <Box flex="1" textAlign="left" alignItems={'center'} fontSize="lg" fontWeight="semibold">
+            <Text fontSize={'2xl'}>{index === 0 ? 'CLAIM INITIAL QCK AIRDROP' : 'ACTION DESCRIPTION'}</Text>
+          </Box>
+          <ChevronDownIcon />
+        </AccordionButton>
+      </h2>
+      {isOpen && (
+        <AccordionPanel p={4} borderBottomRadius="20px" h="120px" pb={'30px'} bgColor="rgba(255, 128, 0, 1)">
+          <Text>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </Text>
+        </AccordionPanel>
+      )}
+    </AccordionItem>
+  );
+};
 
 const AirdropSection = () => {
-  const bgColor = useColorModeValue('white', 'gray.800');
-  const textColor = useColorModeValue('gray.600', 'gray.200');
+  const { isOpen, onToggle } = useDisclosure();
 
   return (
     <VStack spacing={4} align="stretch">
-      <Box bg={bgColor} p={5} shadow="md" borderRadius="lg">
+      <Box bg={'rgba(255,255,255,0.1)'} p={5} shadow="md" borderRadius="lg">
         <Flex justifyContent="space-between" alignItems="center" mb={5}>
           <Text fontSize="xl" fontWeight="bold">
             Cosmos Hub Active Airdrop
@@ -33,26 +79,13 @@ const AirdropSection = () => {
           </Tooltip>
         </Flex>
         <Progress colorScheme="orange" size="sm" value={40} mb={5} />
-        <Accordion allowToggle>
+        <Accordion allowToggle defaultIndex={[0]}>
           {Array.from({ length: 5 }).map((_, index) => (
-            <AccordionItem key={index}>
-              <h2>
-                <AccordionButton _expanded={{ bg: 'orange.100', color: 'orange.800' }}>
-                  <Box flex="1" textAlign="left">
-                    Step {index + 1}: {index === 0 ? 'CLAIM INITIAL QCK AIRDROP' : 'ACTION DESCRIPTION'}
-                  </Box>
-                  <AccordionIcon />
-                </AccordionButton>
-              </h2>
-              <AccordionPanel pb={4}>
-                {/* Replace this with actual content */}
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-              </AccordionPanel>
-            </AccordionItem>
+            <AirdropAccordionItem key={index} index={index} defaultIsOpen={index === 0} />
           ))}
         </Accordion>
       </Box>
-      <Box bg={bgColor} p={5} shadow="md" borderRadius="lg">
+      <Box bg={'rgba(255,255,255,0.1)'} p={5} shadow="md" borderRadius="lg">
         <Flex justifyContent="space-between" alignItems="center" mb={5}>
           <Text fontSize="xl" fontWeight="bold">
             Participate in Other Airdrops
@@ -63,9 +96,7 @@ const AirdropSection = () => {
           {['OSMOSIS', 'JUNO', 'STARGAZE', 'REGEN', 'COSMOS'].map((chain) => (
             <VStack key={chain} spacing={3} align="center">
               <Box w="100px" h="100px" bg="gray.100" borderRadius="md" />
-              <Text fontSize="md" color={textColor}>
-                {chain}
-              </Text>
+              <Text fontSize="md">{chain}</Text>
               <Button rightIcon={<ChevronRightIcon />} colorScheme="teal" variant="link">
                 View Airdrop
               </Button>