feat: add useAccordion props

agustinusnathaniel · Dec 25, 2020 · a0db791 · a0db791 · vercel · Dec 25, 2020
1 parent 78112a2
commit a0db791
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 31 deletions.
diff --git a/src/components/item/ItemCard.tsx b/src/components/item/ItemCard.tsx
@@ -22,9 +22,10 @@ import { ListItem } from "../models/list";
 
 type ItemCardProps = {
   value: ListItem;
+  useAccordion?: boolean;
 };
 
-const ItemCard = ({ value }: ItemCardProps) => {
+const ItemCard = ({ value, useAccordion = true }: ItemCardProps) => {
   const { colorMode } = useColorMode();
 
   const {
@@ -37,6 +38,13 @@ const ItemCard = ({ value }: ItemCardProps) => {
     Link: APILink,
   } = value;
 
+  const apiDetailsProps: APIDetailsProps = {
+    Cors,
+    HTTPS,
+    Category,
+    Auth,
+  };
+
   const toast = useToast();
 
   const handleCopy = () => {
@@ -62,33 +70,23 @@ const ItemCard = ({ value }: ItemCardProps) => {
         <Text>{Description}</Text>
       </Box>
 
-      <Accordion allowToggle marginY={2}>
-        <AccordionItem>
-          <AccordionButton>
-            <Box flex="1" textAlign="left">
-              <Text fontSize="sm">Details</Text>
-            </Box>
-            <AccordionIcon />
-          </AccordionButton>
-          <AccordionPanel>
-            <Text>Category: {Category}</Text>
-            <Text>Support: </Text>
-            <Box marginLeft={4}>
-              <Flex alignItems="center">
-                <Text marginRight={2}>HTTPS :</Text>
-                {HTTPS ? (
-                  <AiFillCheckCircle color="green" />
-                ) : (
-                  <AiFillCloseCircle color="red" />
-                )}
-              </Flex>
-
-              <Text>CORS : {Cors}</Text>
-            </Box>
-            {Auth && <Text>Auth : {Auth}</Text>}
-          </AccordionPanel>
-        </AccordionItem>
-      </Accordion>
+      {useAccordion ? (
+        <Accordion allowToggle marginY={2}>
+          <AccordionItem>
+            <AccordionButton>
+              <Box flex="1" textAlign="left">
+                <Text fontSize="sm">Details</Text>
+              </Box>
+              <AccordionIcon />
+            </AccordionButton>
+            <AccordionPanel>
+              <APIDetails {...apiDetailsProps} />
+            </AccordionPanel>
+          </AccordionItem>
+        </Accordion>
+      ) : (
+        <APIDetails {...apiDetailsProps} />
+      )}
 
       <Box>
         <Text>API Link: </Text>
@@ -111,4 +109,28 @@ const ItemCard = ({ value }: ItemCardProps) => {
   );
 };
 
+type APIDetailsProps = Omit<ListItem, "API" | "Description" | "Link">;
+
+const APIDetails = ({ Category, HTTPS, Cors, Auth }: APIDetailsProps) => {
+  return (
+    <>
+      <Text>Category: {Category}</Text>
+      <Text>Support: </Text>
+      <Box marginLeft={4}>
+        <Flex alignItems="center">
+          <Text marginRight={2}>HTTPS :</Text>
+          {HTTPS ? (
+            <AiFillCheckCircle color="green" />
+          ) : (
+            <AiFillCloseCircle color="red" />
+          )}
+        </Flex>
+
+        <Text>CORS : {Cors}</Text>
+      </Box>
+      {Auth && <Text>Auth : {Auth}</Text>}
+    </>
+  );
+};
+
 export default ItemCard;
diff --git a/src/components/item/ItemContainer.tsx b/src/components/item/ItemContainer.tsx
@@ -6,16 +6,17 @@ import { ListItem } from "../models/list";
 
 type ItemContainerProps = {
   entries: Array<ListItem>;
+  useAccordion?: boolean;
 };
 
-const ItemContainer = ({ entries }: ItemContainerProps) => {
+const ItemContainer = ({ entries, useAccordion }: ItemContainerProps) => {
   return (
     <Grid
       templateColumns={["repeat(1)", "repeat(1)", "repeat(2, 1fr)"]}
       gap={2}
     >
       {entries.map((entry, index) => (
-        <ItemCard value={entry} key={index} />
+        <ItemCard value={entry} key={index} useAccordion={useAccordion} />
       ))}
     </Grid>
   );

diff --git a/src/pages/all.tsx b/src/pages/all.tsx
@@ -28,7 +28,9 @@ const All = () => {
         </Button>
       </Link>
       <Skeleton isLoaded={!isLoading} minHeight="80vh">
-        {data && data.entries && <ItemContainer entries={sortedData} />}
+        {data && data.entries && (
+          <ItemContainer entries={sortedData} useAccordion={false} />
+        )}
       </Skeleton>
     </Box>
   );