Merge pull request #8 from AI4Bharat/react-django

UI Fixes

frontend/components/Datasets.tsx

@@ -35,6 +35,7 @@ const datasetIcons: { [key: string]: React.ReactElement } = {
 interface FeatureProps {
   title: string;
   icon: string;
+  dataset_link: string;
 }
 
 interface Dataset {
@@ -55,9 +56,9 @@ interface Dataset {
 //   Aksharantar: { path: "", icon: "/assets/icons/xlit.png" },
 // };
 
-const Feature = ({ title, icon }: FeatureProps) => {
+const Feature = ({ title, icon, dataset_link }: FeatureProps) => {
   return (
-    <Stack>
+    <Stack as={Link} href={dataset_link}>
       <Flex
         w={16}
         h={16}
@@ -192,6 +193,9 @@ export default function Datasets() {
                   <Feature
                     icon={dataset.area.toLowerCase()}
                     title={dataset.title}
+                    dataset_link={
+                      dataset.website_link ? dataset.website_link : ""
+                    }
                   />
                 </CardBody>
               </Card>

frontend/components/TryOut/NMT.tsx

@@ -17,10 +17,7 @@ import {
 import { LANGUAGE_CODE_NAMES } from "@/app/config";
 import axios from "axios";
 import { API_URL } from "@/app/config";
-const IndicTransliterate =
-  typeof window !== "undefined"
-    ? require("@ai4bharat/indic-transliterate").IndicTransliterate
-    : null;
+import { IndicTransliterate } from "@ai4bharat/indic-transliterate";
 
 const fetchTranslation = async ({
   sourceLanguage,
@@ -124,29 +121,23 @@ export default function NMT({
             </VStack>
           </HStack>
           <VStack w={"full"}>
-            {/* <IndicTransliterate
+            <IndicTransliterate
               enabled={sourceLanguage !== "en" && transliteration}
-              renderComponent={(props) => (
-                <Textarea
-                  minWidth={270}
-                  width={{ base: "90%", md: "80%", lg: "100%" }}
-                  {...props}
-                />
-              )}
+              renderComponent={(props) => <Textarea {...props} />}
               value={inputText}
               onChangeText={(text) => {
                 setInputText(text);
               }}
               lang={sourceLanguage}
-            /> */}
-            <Textarea
+            />
+            {/* <Textarea
               minWidth={270}
               width={{ base: "90%", md: "80%", lg: "100%" }}
               value={inputText}
               onChange={(event) => {
                 setInputText(event.target.value);
               }}
-            />
+            /> */}
             <Textarea value={outputText} isReadOnly></Textarea>
             <Button
               onClick={async () => {

frontend/package.json

@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@ai4bharat/indic-transliterate": "^1.3.7",
+    "@ai4bharat/indic-transliterate": "^1.3.2",
     "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.13.3",

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

@@ -1,10 +1,6 @@
 import { title } from "process";
 import ModelView from "../../../../../../components/Models";
 
-interface ParamsType {
-  slug: Array<string>;
-}
-
 interface Model {
   area: string;
   title: string;

frontend/src/app/tools/[tool]/page.tsx

@@ -0,0 +1,26 @@
+import ToolComponent from "../../../../components/Dynamic/Tool";
+import axios from "axios";
+
+interface ToolType {
+  title: string;
+}
+
+export async function generateStaticParams() {
+  const response = await axios.get("https://admin.models.ai4bharat.org/tools/");
+
+  const tools = response.data;
+
+  let params: any[] = [];
+
+  tools.forEach((tool: ToolType) => {
+    params.push({
+      tool: tool.title,
+    });
+  });
+
+  return params;
+}
+export const dynamicParams = true;
+export default function Tool({ params }: { params: { tool: string } }) {
+  return <ToolComponent slug={params.tool} />;
+}