Merge pull request #15 from Laina-Protocol/feat/use-react-for-frontend

feat: Convert frontend components to use React.

package.json

@@ -4,28 +4,30 @@
     "@astrojs/react": "^3.6.0",
     "@astrojs/tailwind": "^5.1.0",
     "@creit.tech/stellar-wallets-kit": "^0.9.2",
+    "@fontsource/inter": "^5.0.20",
     "@stellar/freighter-api": "^2.0.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "astro": "^4.2.4",
     "framer-motion": "^11.3.17",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.1",
     "tailwindcss": "^3.4.7",
     "typescript": "^5.3.3"
   },
   "devDependencies": {
     "@biomejs/biome": "1.8.3",
     "@vitejs/plugin-basic-ssl": "^1.1.0",
+    "dotenv": "^16.4.5",
     "prettier": "^3.3.3",
-    "prettier-plugin-astro": "^0.14.1",
-    "dotenv": "^16.4.5"
+    "prettier-plugin-astro": "^0.14.1"
   },
   "name": "sorobanathon",
   "scripts": {
     "astro": "astro",
     "build": "astro check && astro build",
-    "dev": "npm run init && astro dev",
+    "dev": "astro dev",
     "init": "node initialize.js",
     "preview": "astro preview",
     "start": "npm run init && astro dev",

src/App.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Outlet, RouterProvider, createBrowserRouter } from 'react-router-dom';
+
+import Nav from '@components/Nav';
+import BorrowPage from '@pages/borrow/BorrowPage';
+import LandingPage from '@pages/landing/LandingPage';
+import LendPage from '@pages/lend/LendPage';
+import LiquidatePage from '@pages/liquidate/LiquidatePage';
+
+const PageWrapper = () => (
+  <>
+    <Nav />
+    <main className="max-w-screen w-256">
+      <Outlet />
+    </main>
+  </>
+);
+
+const router = createBrowserRouter([
+  {
+    element: <PageWrapper />,
+    children: [
+      { path: '', element: <LandingPage /> },
+      { path: 'lend', element: <LendPage /> },
+      { path: 'borrow', element: <BorrowPage /> },
+      { path: 'liquidate', element: <LiquidatePage /> },
+    ],
+  },
+]);
+
+const App = () => {
+  return (
+    <React.StrictMode>
+      <RouterProvider router={router} />
+    </React.StrictMode>
+  );
+};
+
+export default App;

src/components/Button.tsx

@@ -0,0 +1,35 @@
+import type { PropsWithChildren } from 'react';
+import { Link } from 'react-router-dom';
+
+export interface ButtonProps {
+  onClick: () => void;
+  className?: string;
+}
+
+export const Button = ({ onClick, className = '', children }: PropsWithChildren<ButtonProps>) => (
+  <button
+    type="button"
+    onClick={onClick}
+    className={`bg-black text-white rounded-full px-8 py-2 hover:bg-grey-dark transition ${className}`}
+  >
+    {children}
+  </button>
+);
+
+export const SelectButtonWrapper = ({ children }: PropsWithChildren) => (
+  <div className="flex bg-grey p-1 gap-2 rounded-full">{children}</div>
+);
+
+export interface SelectLinkButtonProps {
+  to: string;
+  selected: boolean;
+}
+
+export const SelectLinkButton = ({ to, selected, children }: PropsWithChildren<SelectLinkButtonProps>) => (
+  <Link
+    className={`font-bold px-6 py-1.5 rounded-full hover:text-black transition ${selected ? 'bg-white text-black' : 'text-white'}`}
+    to={to}
+  >
+    {children}
+  </Link>
+);

src/components/Card.tsx

@@ -0,0 +1,9 @@
+import type { PropsWithChildren } from 'react';
+
+export interface CardProps {
+  className?: string;
+}
+
+export const Card = ({ className = '', children }: PropsWithChildren<CardProps>) => (
+  <div className={`bg-white rounded drop-shadow ${className}`}>{children}</div>
+);

src/components/Nav.tsx

@@ -1,19 +1,29 @@
+import { Link, useLocation } from 'react-router-dom';
 import logo from '/public/laina_v3_shrinked.png';
+import { SelectButtonWrapper, SelectLinkButton } from './Button';
 
 export default function Nav() {
+  const { pathname } = useLocation();
+
   return (
     <nav className="relative max-w-screen-lg mx-auto mb-12 flex justify-between items-center pt-12 pb-6">
       <div>
-        <a href="/">
+        <Link to="/">
           <img src={logo.src} alt="logo" width={200} />
-        </a>
+        </Link>
       </div>
 
-      <div className="flex gap-12 bg-gray-200 rounded-full px-8 py-2 text-white font-bold">
-        <a href="/lend">Lend</a>
-        <a href="/borrow">Borrow</a>
-        <a href="/liquidate">Liquidate</a>
-      </div>
+      <SelectButtonWrapper>
+        <SelectLinkButton to="/lend" selected={pathname === '/lend'}>
+          Lend
+        </SelectLinkButton>
+        <SelectLinkButton to="/borrow" selected={pathname === '/borrow'}>
+          Borrow
+        </SelectLinkButton>
+        <SelectLinkButton to="/liquidate" selected={pathname === '/liquidate'}>
+          Liquidate
+        </SelectLinkButton>
+      </SelectButtonWrapper>
 
       <div className="bg-black text-white px-8 py-2 rounded-full">
         {/* biome-ignore lint: TODO: connect wallet */}