Merge pull request #107 from wugalde19/feat/add-users-funds-page

Feat: Add users funds page

frontend/gostarkme-web/animations/StardustAnimation.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 
-export const StardustAnimation = ({height, width}: {height: number, width: number}) => {
+export const StardustAnimation = ({height, width}: {height?: number, width?: number}) => {
     const canvasRef = useRef<HTMLCanvasElement>(null);
 
     useEffect(() => {
@@ -11,8 +11,8 @@ export const StardustAnimation = ({height, width}: {height: number, width: numbe
       let animationFrameId: number;
 
       // Set canvas size
-      canvas.width = width;
-      canvas.height = height;
+      canvas.width = width ?? window.innerWidth;
+      canvas.height = height ?? window.innerHeight;
 
       // Create stars
       const stars: { x: number; y: number; size: number; speed: number; }[] = [];

frontend/gostarkme-web/app/app/myfunds/[useraddr]/page.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import UserFunds from '@/components/modules/myfunds/UserFunds';
+import Navbar from '@/components/ui/Navbar';
+import Footer from '@/components/ui/Footer';
+
+interface MyFundsPageProps {
+  params: { useraddr: string };
+}
+
+export function generateStaticParams() {
+  return [{ useraddr: '1' }]
+}
+
+const MyFundsPage: React.FC<MyFundsPageProps> = ({ params }) => {
+  const { useraddr } = params;
+
+  const navItems = [
+    { label: 'My Profile', href: `/app/myprofile/${useraddr}` },
+    { label: 'My funds', href: `/app/myfunds/${useraddr}` }
+  ];
+
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Navbar
+        logoSrc={process.env.NEXT_PUBLIC_APP_ROOT + "icons/starklogo.png"}
+        logoAlt="Go Stark Me logo"
+        title="Go Stark Me"
+        navItems={navItems}
+        ctaButton={{
+          label: "Connect wallet",
+          href: "/"
+        }}
+      />
+      <main className="flex flex-grow w-full justify-center bg-white p-8">
+        <UserFunds userAddress={useraddr} />
+      </main>
+      <Footer />
+    </div>
+  );
+};
+
+export default MyFundsPage;

frontend/gostarkme-web/components/modules/myfunds/FundCard.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { StardustAnimation } from '@/animations/StardustAnimation';
+
+type FundType = 'Project' | 'Fund';
+
+interface FundCardProps {
+    type: FundType;
+    title: string;
+    description: string;
+    onClick?: () => void;
+}
+
+const FundCard: React.FC<FundCardProps> = ({ type, title, description, onClick }) => {
+  const fundEmoji = type === "Project" ? '&#x1F9E0;' : "&#129728;"
+
+  return (
+    <div className="bg-[#0A0A1A] text-white p-10 rounded-lg shadow-md relative overflow-hidden">
+      <div className="absolute inset-0 z-0">
+        <StardustAnimation />
+      </div>
+      <div className="relative z-10">
+        <div className="flex items-center justify-between mb-2">
+          <span className="flex items-center text-1xl">
+            <span className='text-1xl'>{type}</span>
+            <span dangerouslySetInnerHTML={{ __html: fundEmoji}} className="ml-1" />
+          </span>
+          {onClick && (
+            <button 
+              className="bg-[#C92B25] text-white py-0.5 px-8 rounded-md hover:bg-red-700 transition-colors cursor-pointer" 
+              onClick={onClick}
+            >
+              Delete
+            </button>
+          )}
+        </div>
+        <h1 className="text-4xl font-bold mb-5">{title}</h1>
+        <div className="h-16 overflow-hidden overflow-ellipsis">
+          <p className="text-white text-[18px] line-clamp-2">{description}</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FundCard;

frontend/gostarkme-web/components/modules/myfunds/UserFunds.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import React, { useEffect, useState } from 'react';
+import FundCard from '@/components/modules/myfunds/FundCard';
+import { Button } from '@/components/ui/Button';
+
+interface UserFundsProps {
+  userAddress: string;
+}
+
+const UserFunds: React.FC<UserFundsProps> = ({ userAddress }) => {
+  const [funds, setFunds] = useState<object[]>([]);
+
+  useEffect(() => {
+    // TODO: Implement funds fetching using 'userAddress'
+    setFunds([
+      {
+        id: 1,
+        type: "Project",
+        title: "Batman's fund",
+        description: "Example of card without delete button",
+      },
+      {
+        id: 2,
+        type: "Project",
+        title: "Deadpool's fund",
+        description: "I need help with my project to develop an awesome project like Go Stark Me",
+        onClick: handleDeleteFund
+      },
+      {
+        id: 3,
+        type: "Fund",
+        title: "Spider-Man's fund",
+        description: "Text to prove that we add elipsis when text exceds card width and we don't break the layout. asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf",
+        onClick: handleDeleteFund
+      }
+    ]);
+  }, []);
+
+  const handleDeleteFund = (fundId: number) => {
+    // TODO: Implement fund deletion based on a unique id or receive the fund object and delete it
+    alert(`Deleting fund with id: ${fundId}`);
+  }
+
+  const onNewFundHandler = () => {
+    // TODO: Implement new fund action
+    alert(`Creating new fund`);
+  }
+
+  return (
+    <div className="max-w-screen-2xl mx-auto bg-white p-4 w-full">
+      <div className="flex justify-between items-center mb-6">
+        <div className="flex items-center">
+          <h1 className="text-2xl font-bold mr-2">My Funds &#10024;</h1>
+        </div>
+        <Button className='!px-12 !py-2.5' label='New' onClick={onNewFundHandler} />
+      </div>
+
+      {funds.length === 0 ? (
+        <div className="flex justify-center items-center h-64">
+            <div className="text-center text-gray-500">
+            No funds found for address {userAddress.slice(0, 5)}...{userAddress.slice(-4)}
+            </div>
+        </div>
+        ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-y-10 gap-x-16">
+            {funds.map((fund: any, index: number) => (
+            <FundCard 
+                key={index} 
+                type={fund.type} 
+                title={fund.title} 
+                description={fund.description} 
+                {... fund.onClick && { onClick: () => fund.onClick(fund.id) }}
+            />
+            ))}
+        </div>
+        )}
+    </div>
+  );
+};
+
+export default UserFunds;

frontend/gostarkme-web/components/ui/Button.tsx

@@ -6,14 +6,15 @@ interface ButtonProps {
   label: string;
   onClick: () => void;
   Icon?: React.ComponentType<any>;
+  className?: string;
 }
 
-export const Button = ({ label, onClick, Icon }: ButtonProps) => {
+export const Button = ({ label, onClick, Icon, className }: ButtonProps) => {
   return (
     <button
       onClick={onClick}
-      className="self-center bg-darkblue text-white py-2 px-6 md:py-3 md:px-10 rounded-md shadow-xl hover:bg-starkorange active:bg-darkblue ease-in-out duration-500 active:duration-0 shadow-gray-400 
-                    text-left text-1xl font-light leading-tight"
+      className={`self-center bg-darkblue text-white py-2 px-6 md:py-3 md:px-10 rounded-md shadow-xl hover:bg-starkorange active:bg-darkblue ease-in-out duration-500 active:duration-0 shadow-gray-400 
+                    text-left text-1xl font-light leading-tight ${className}`}
     >
       {Icon ? <Icon className="text-xl md:text-2xl w-5 md:w-6" /> : label}
     </button>