Merge pull request #8 from btb-finance/staging

welcome added
btb-finance · Aug 7, 2024 · 3eaea4e · 3eaea4e
2 parents e260031 + 21e6534
commit 3eaea4e
Show file tree

Hide file tree

Showing 7 changed files with 120 additions and 9 deletions.
diff --git a/src/app/components/Layout.tsx b/src/app/components/Layout.tsx
@@ -1,3 +1,18 @@
 // src/app/components/Layout.tsx
 // Main layout component that includes headers, footers, and navigational elements.
 
+import React, { ReactNode } from 'react';
+import Navigation from './Navigation';
+
+interface LayoutProps {
+  children: ReactNode;
+}
+
+const Layout: React.FC<LayoutProps> = ({ children }) => (
+  <div>
+    <Navigation />
+    <main>{children}</main>
+  </div>
+);
+
+export default Layout;
diff --git a/src/app/components/Navigation.tsx b/src/app/components/Navigation.tsx
@@ -1,3 +1,17 @@
 // src/app/components/Navigation.tsx
 // Navigation component that contains the navigation menu for the application.
 
+import React from 'react';
+import Link from 'next/link';
+
+const Navigation = () => (
+  <nav>
+    <ul>
+      <li><Link href="/">Home</Link></li>
+      <li><Link href="/invest">Invest</Link></li>
+      <li><Link href="/withdraw">Withdraw</Link></li>
+    </ul>
+  </nav>
+);
+
+export default Navigation;
diff --git a/src/app/components/PoolCard.tsx b/src/app/components/PoolCard.tsx
@@ -1,3 +1,26 @@
 // src/app/components/PoolCard.tsx
 // Component to display information about a specific pool in a card format.
 
+import React from 'react';
+
+interface Pool {
+  name: string;
+  apr: number;
+  apy: number;
+  liquidity: number;
+}
+
+interface PoolCardProps {
+  pool: Pool;
+}
+
+const PoolCard: React.FC<PoolCardProps> = ({ pool }) => (
+  <div className="pool-card">
+    <h3>{pool.name}</h3>
+    <p>APR: {pool.apr}%</p>
+    <p>APY: {pool.apy}%</p>
+    <p>Total Liquidity: ${pool.liquidity}</p>
+  </div>
+);
+
+export default PoolCard;
diff --git a/src/app/components/UserPanel.tsx b/src/app/components/UserPanel.tsx
@@ -1,2 +1,23 @@
 // src/app/components/UserPanel.tsx
 // Component to display user-specific information and actions, such as wallet details.
+import React from 'react';
+
+interface User {
+  name: string;
+  wallet: string;
+  disconnect: () => void;
+}
+
+interface UserPanelProps {
+  user: User;
+}
+
+const UserPanel: React.FC<UserPanelProps> = ({ user }) => (
+  <div className="user-panel">
+    <h3>Welcome, {user.name}</h3>
+    <p>Wallet: {user.wallet}</p>
+    <button onClick={user.disconnect}>Disconnect</button>
+  </div>
+);
+
+export default UserPanel;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import Navigation from './components/Navigation';
+import './styles/globals.css';
+
+export const metadata = {
+  title: 'BTB Finance',
+  description: 'BTB Finance Liquidity Management Platform',
+};
+
+const RootLayout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <html lang="en">
+      <body>
+        <Navigation />
+        <main>{children}</main>
+      </body>
+    </html>
+  );
+};
+
+export default RootLayout;
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,17 +1,15 @@
 // src/app/page.tsx
 
+import React from 'react';
 
-"use client";
-
-import WalletConnect from './WalletConnect';
-
-const Home = () => {
+const HomePage = () => {
   return (
     <div>
-      <h1>Hello Solana Dapp</h1>
-      <WalletConnect />
+      <h1>Welcome to BTB Finance</h1>
+      {/* Add other components or content here */}
     </div>
   );
 };
 
-export default Home;
+export default HomePage;
+
diff --git a/src/app/styles/globals.css b/src/app/styles/globals.css
@@ -1,2 +1,21 @@
 /* src/app/styles/globals.css */
-/* Global CSS styles applied across the entire application */
+/* Global CSS styles applied across the entire application */
+
+body {
+    margin: 0;
+    padding: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    background-color: #f5f5f5;
+    color: #333;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    margin: 0;
+    padding: 0.5rem 0;
+  }
+
+  p {
+    margin: 0;
+    padding: 0.5rem 0;
+  }
+