UI Changes

frontend/components/Sponsors.tsx

@@ -1,19 +1,14 @@
 "use client";
-import Image from "next/image";
+import { imagePrefix } from "@/app/config";
 import {
   Box,
-  Button,
+  Card,
   Container,
-  Flex,
   Heading,
-  Icon,
-  Stack,
-  Text,
-  Card,
-  useColorModeValue,
   SimpleGrid,
+  Stack,
 } from "@chakra-ui/react";
-import { imagePrefix } from "@/app/config";
+import Image from "next/image";
 
 export default function Sponsors() {
   return (
@@ -27,59 +22,59 @@ export default function Sponsors() {
         </Heading>
       </Stack>
 
-      <Container maxW={"5xl"} mt={12}>
-        <SimpleGrid columns={{ base: 1, md: 4 }} spacing={10}>
-          <Card w={150} h={50}>
+      <Box mt={12}>
+        <SimpleGrid gap={10} columns={4}>
+          <Card w={300} h={100}>
             <Image
               src={`${imagePrefix}/assets/logos/meity.svg`}
               alt="LLM"
               fill={true}
             />
           </Card>
-          <Card w={150} h={50}>
+          <Card w={300} h={100}>
             <Image
               src={`${imagePrefix}/assets/logos/nilekani.png`}
               alt="LLM"
               fill={true}
             />
           </Card>
-          <Card w={150} h={50}>
+          <Card w={300} h={100}>
             <Image
               src={`${imagePrefix}/assets/logos/C-DAC.png`}
               alt="LLM"
               fill={true}
             />
           </Card>
-          <Card w={150} h={50}>
+          <Card w={300} h={100}>
             <Image
               src={`${imagePrefix}/assets/logos/microsoft.png`}
               alt="LLM"
               fill={true}
             />
           </Card>
-          <Card w={150} h={50}>
+          <Card w={300} h={100}>
             <Image
               src={`${imagePrefix}/assets/logos/google.png`}
               alt="LLM"
               fill={true}
             />
           </Card>
-          <Card w={150} h={50}>
+          <Card w={300} h={100}>
             <Image
               src={`${imagePrefix}/assets/logos/yotta.png`}
               alt="LLM"
               fill={true}
             />
           </Card>
-          <Card w={150} h={50}>
+          <Card w={300} h={100}>
             <Image
               src={`${imagePrefix}/assets/logos/ekstep.png`}
               alt="LLM"
               fill={true}
             />
           </Card>
         </SimpleGrid>
-      </Container>
+      </Box>
     </Box>
   );
 }

frontend/src/app/areas/model/[area]/[title]/page.tsx

@@ -1,4 +1,3 @@
-import { title } from "process";
 import ModelView from "../../../../../../components/Models";
 
 export const dynamic = "force-dynamic";

frontend/src/app/careers/page.tsx

@@ -6,19 +6,11 @@ import {
   Container,
   Flex,
   Heading,
-  Icon,
   Stack,
   Text,
   useColorModeValue,
 } from "@chakra-ui/react";
 import { ReactElement } from "react";
-import {
-  FcAbout,
-  FcAssistant,
-  FcCollaboration,
-  FcDonate,
-  FcManager,
-} from "react-icons/fc";
 
 import CareerContactBanner from "../../../components/CareerContactBanner";
 import Jobs from "../../../components/CareerJobList";

frontend/src/app/config.tsx

@@ -24,6 +24,7 @@ export const LANGUAGE_CODE_NAMES = {
   mr: "Marathi",
   mni: "Meitei (Manipuri)",
   raj: "Rajasthani",
+  si: "Sinhala",
 };
 
 export const imagePrefix = process.env.BASE_PATH || "";

frontend/src/app/publications/page.tsx

@@ -9,13 +9,14 @@ import {
   VStack,
   Flex,
   Link,
-  Select,
   useColorModeValue,
   Button,
   Stack,
+  Wrap,
   useBreakpointValue,
   Divider,
-  SimpleGrid,
+  useRadio,
+  useRadioGroup,
 } from "@chakra-ui/react";
 import { FaPaperclip, FaGithub, FaCode } from "react-icons/fa";
 import { useQuery } from "react-query";
@@ -24,6 +25,38 @@ import { API_URL } from "../config";
 import Image from "next/image";
 import { imagePrefix } from "../config";
 
+// 1. Create a component that consumes the `useRadio` hook
+function RadioCard(props: any) {
+  const { getInputProps, getRadioProps } = useRadio(props);
+
+  const input = getInputProps();
+  const checkbox = getRadioProps();
+
+  return (
+    <Box as="label">
+      <input {...input} />
+      <Box
+        {...checkbox}
+        cursor="pointer"
+        borderWidth="1px"
+        borderRadius="md"
+        borderColor={"orange"}
+        boxShadow="md"
+        width={"fit-content"}
+        fontWeight={"bold"}
+        _checked={{
+          bg: "a4borange",
+          color: "white",
+          borderColor: "white",
+        }}
+        p={1}
+      >
+        {props.children}
+      </Box>
+    </Box>
+  );
+}
+
 const ExpandableText = ({
   text,
   noOfLines = 2,
@@ -133,72 +166,90 @@ const Publications = () => {
     setFilteredPublications(filtered);
   }, [filterArea, filterYear, filterConference, publications]);
 
+  const { getRootProps: areaRootProps, getRadioProps: areaRadioProps } =
+    useRadioGroup({
+      name: "areaGroup",
+      defaultValue: filterArea,
+      value: filterArea,
+      onChange: setFilterArea,
+    });
+
+  const areaGroup = areaRootProps();
+
+  const { getRootProps: yearRootProps, getRadioProps: yearRadioProps } =
+    useRadioGroup({
+      name: "yearGroup",
+      defaultValue: filterYear,
+      value: filterYear,
+      onChange: setFilterYear,
+    });
+
+  const yearGroup = yearRootProps();
+
+  const { getRootProps: confRootProps, getRadioProps: confRadioProps } =
+    useRadioGroup({
+      name: "confGroup",
+      defaultValue: filterConference,
+      value: filterConference,
+      onChange: setFilterConference,
+    });
+
+  const confGroup = confRootProps();
+
   return (
     <Box p={5}>
       <chakra.h3 fontSize="4xl" fontWeight="bold" mb={18} textAlign="center">
         Publications
       </chakra.h3>
-      <Stack>
-        <HStack p={3}>
+      <Stack ml={5}>
+        <HStack>
           <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 {...areaGroup}>
+            {filters.areas.map((value) => {
+              const radio = areaRadioProps({ value });
+              return (
+                <RadioCard key={value} {...radio}>
+                  {value}
+                </RadioCard>
+              );
+            })}
+          </HStack>
         </HStack>
         <HStack>
           <Text fontSize={"lg"} as="b">
-            Conference:{" "}
+            Year:{" "}
           </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>
-            ))}
-          </SimpleGrid>
+          <HStack {...yearGroup}>
+            {filters.years.map((value) => {
+              const radio = yearRadioProps({ value });
+              return (
+                <RadioCard key={value} {...radio}>
+                  {value}
+                </RadioCard>
+              );
+            })}
+          </HStack>
         </HStack>
-        <HStack p={3}>
+        <HStack>
           <Text fontSize={"lg"} as="b">
-            Year:{" "}
+            Conference:{" "}
           </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>
-          ))}
+          <Wrap {...confGroup}>
+            {filters.conferences.map((value) => {
+              const radio = confRadioProps({ value });
+              return (
+                <RadioCard key={value} {...radio}>
+                  {value}
+                </RadioCard>
+              );
+            })}
+          </Wrap>
         </HStack>
         <Button
+          mt={7}
+          alignSelf={"center"}
           width={"fit-content"}
           color={"a4borange"}
           onClick={() => {