navigate card

.gitignore

@@ -3,3 +3,4 @@ node_modules
 frontend/dist
 .idea
 .vs
+package.json.md5

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 josStorer
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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>
         ))}