navigate card

frontend/src/App.css

@@ -1,59 +0,0 @@
-#app {
-    height: 100vh;
-    text-align: center;
-}
-
-#logo {
-    display: block;
-    width: 50%;
-    height: 50%;
-    margin: auto;
-    padding: 10% 0 0;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    background-origin: content-box;
-}
-
-.result {
-    height: 20px;
-    line-height: 20px;
-    margin: 1.5rem auto;
-}
-
-.input-box .btn {
-    width: 60px;
-    height: 30px;
-    line-height: 30px;
-    border-radius: 3px;
-    border: none;
-    margin: 0 0 0 20px;
-    padding: 0 8px;
-    cursor: pointer;
-}
-
-.input-box .btn:hover {
-    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
-    color: #333333;
-}
-
-.input-box .input {
-    border: none;
-    border-radius: 3px;
-    outline: none;
-    height: 30px;
-    line-height: 30px;
-    padding: 0 10px;
-    background-color: rgba(240, 240, 240, 1);
-    -webkit-font-smoothing: antialiased;
-}
-
-.input-box .input:hover {
-    border: none;
-    background-color: rgba(255, 255, 255, 1);
-}
-
-.input-box .input:focus {
-    border: none;
-    background-color: rgba(255, 255, 255, 1);
-}

frontend/src/Pages/Home.tsx

@@ -1,4 +1,4 @@
-import {Text, Combobox, CompoundButton, Link, Option} from '@fluentui/react-components';
+import {Combobox, CompoundButton, Link, Option, Text} from '@fluentui/react-components';
 import React, {FC, ReactElement} from 'react';
 import Banner from '../assets/images/banner.jpg';
 import {
@@ -7,6 +7,7 @@ import {
   DocumentSettings20Regular,
   Storage20Regular
 } from '@fluentui/react-icons';
+import {useNavigate} from 'react-router';
 
 type NavCard = {
   label: string;
@@ -15,7 +16,7 @@ type NavCard = {
   icon: ReactElement;
 };
 
-export const navCards:NavCard[] = [
+export const navCards: NavCard[] = [
   {
     label: 'Chat',
     desc: 'Go to chat page',
@@ -45,6 +46,12 @@ export const navCards:NavCard[] = [
 export const Home: FC = () => {
   const [selectedConfig, setSelectedConfig] = React.useState('RWKV-3B-4G MEM');
 
+  const navigate = useNavigate();
+
+  const onClickNavCard = (path: string) => {
+    navigate({pathname: path});
+  };
+
   return (
     <div className="flex flex-col justify-between h-full">
       <img className="rounded-xl select-none" src={Banner}/>
@@ -63,7 +70,7 @@ export const Home: FC = () => {
       <div className="flex justify-between">
         {navCards.map(({label, path, icon, desc}, index) => (
           <CompoundButton className="w-1/5" icon={icon} secondaryContent={desc} key={`${path}-${index}`} value={path}
-                          size="large">
+                          size="large" onClick={() => onClickNavCard(path)}>
             {label}
           </CompoundButton>
         ))}