Merge pull request #21 from AI4Bharat/react-django

UI Fixes
AI4Bharat · Sep 3, 2024 · ea632c8 · ea632c8
2 parents 8278bbe + c1133cd
commit ea632c8
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 41 deletions.
diff --git a/frontend/components/Hero.tsx b/frontend/components/Hero.tsx
@@ -144,8 +144,8 @@ export default function Hero() {
           </Box>
         </Flex>
       </Stack>
-      <Divider colorScheme="orange" variant={"solid"} />
-      <News />
+      {/* <Divider colorScheme="orange" variant={"solid"} />
+      <News /> */}
       <Divider colorScheme="orange" variant={"solid"} />
       <Features />
       <Divider colorScheme="orange" variant={"solid"} />

diff --git a/frontend/src/app/publications/page.tsx b/frontend/src/app/publications/page.tsx
@@ -14,6 +14,8 @@ import {
   Button,
   Stack,
   useBreakpointValue,
+  Divider,
+  SimpleGrid,
 } from "@chakra-ui/react";
 import { FaPaperclip, FaGithub } from "react-icons/fa";
 import { useQuery } from "react-query";
@@ -129,54 +131,72 @@ const Publications = () => {
   }, [filterArea, filterYear, filterConference, publications]);
 
   return (
-    <Container maxWidth="4xl" p={{ base: 2, sm: 10 }}>
+    <Box p={5}>
       <chakra.h3 fontSize="4xl" fontWeight="bold" mb={18} textAlign="center">
         Publications
       </chakra.h3>
       <Stack>
-        <HStack>
-          <Text>Area: </Text>
-          <Select
-            value={filterArea}
-            onChange={(event) => setFilterArea(event.target.value)}
-          >
-            <option value="All">All</option>
-            {(filters.areas as string[]).map((area) => (
-              <option key={area} value={area}>
-                {area.toUpperCase()}
-              </option>
-            ))}
-          </Select>
+        <HStack p={3}>
+          <Text fontSize={"lg"} as="b">
+            Area:{" "}
+          </Text>
+          {filters.areas.map((area) => (
+            <Button
+              minWidth={"max-content"}
+              p={2}
+              value={area}
+              onClick={(event) =>
+                setFilterArea((event.target as HTMLInputElement).value)
+              }
+              colorScheme="orange"
+              key={area}
+            >
+              {area}
+            </Button>
+          ))}
         </HStack>
         <HStack>
-          <Text>Conference: </Text>
-          <Select
-            value={filterConference}
-            onChange={(event) => setFilterConference(event.target.value)}
-          >
-            <option value="All">All</option>
-            {(filters.conferences as string[]).map((conference) => (
-              <option key={conference} value={conference}>
-                {conference.toUpperCase()}
-              </option>
+          <Text fontSize={"lg"} as="b">
+            Conference:{" "}
+          </Text>
+          <SimpleGrid gap={3} columns={[2, 5, 6, 7]}>
+            {filters.conferences.map((conference) => (
+              <Button
+                minWidth={"max-content"}
+                p={2}
+                value={conference}
+                onClick={(event) =>
+                  setFilterConference((event.target as HTMLInputElement).value)
+                }
+                colorScheme="orange"
+                key={conference}
+              >
+                {conference}
+              </Button>
             ))}
-          </Select>
+          </SimpleGrid>
         </HStack>
-        <HStack>
-          <Text>Year: </Text>
-          <Select
-            value={filterYear}
-            onChange={(event) => setFilterYear(event.target.value)}
-          >
-            <option value="All">All</option>
-            {filters.years.map((year) => (
-              <option key={year} value={year}>
-                {year}
-              </option>
-            ))}
-          </Select>
+        <HStack p={3}>
+          <Text fontSize={"lg"} as="b">
+            Year:{" "}
+          </Text>
+          {filters.years.map((year) => (
+            <Button
+              minWidth={"max-content"}
+              p={2}
+              value={year}
+              onClick={(event) =>
+                setFilterYear((event.target as HTMLInputElement).value)
+              }
+              colorScheme="orange"
+              key={year}
+            >
+              {year}
+            </Button>
+          ))}
         </HStack>
         <Button
+          width={"fit-content"}
           color={"a4borange"}
           onClick={() => {
             setFilterArea("All");
@@ -187,6 +207,7 @@ const Publications = () => {
           Reset Filters
         </Button>
       </Stack>
+      <Divider m={5} />
       <br />
       <Container height={isMobile ? 500 : "auto"} overflowY={"scroll"}>
         {filteredPublications.map((pub, index) => (
@@ -205,7 +226,7 @@ const Publications = () => {
           </Flex>
         ))}
       </Container>
-    </Container>
+    </Box>
   );
 };