diff --git a/app/components/header.tsx b/app/components/header.tsx index 9f394cc..1e8feb0 100644 --- a/app/components/header.tsx +++ b/app/components/header.tsx @@ -1,8 +1,15 @@ -export default function Header() { +import type { HeaderProps } from '@/types/header.types'; +import UserProfileDropdown from './header/user-profile-dropdown'; + +export default function Header({ headerType }: HeaderProps) { return (
EquiBoard
- {/*
User Section
*/} + {headerType === 'user-section' && ( +
+ +
+ )}
); } diff --git a/app/components/header/user-profile-dropdown.tsx b/app/components/header/user-profile-dropdown.tsx new file mode 100644 index 0000000..99298bb --- /dev/null +++ b/app/components/header/user-profile-dropdown.tsx @@ -0,0 +1,45 @@ +import * as DropdownMenu from '@radix-ui/react-dropdown-menu'; +import * as Avatar from '@radix-ui/react-avatar'; +import { LogOut, Settings, User } from 'lucide-react'; + +export default function UserProfileDropdown() { + return ( + + {/* Trigger */} + + + + + {/* Dropdown */} + + + + + Profile + + + + + Settings + + + + + + + Logout + + + + + ); +} diff --git a/app/components/org-card.tsx b/app/components/org-card.tsx index 9d14602..57adaae 100644 --- a/app/components/org-card.tsx +++ b/app/components/org-card.tsx @@ -1,13 +1,24 @@ -import type { JSX } from 'react'; import type { IOrgCard } from '@/types/org-card.types'; -export default function orgCard({ cardProps, addClass }: { cardProps: IOrgCard; addClass: string }): JSX.Element { +interface OrgCardProps { + cardProps: IOrgCard; + onViewDetails?: () => void; +} + +export default function OrgCard({ cardProps, onViewDetails }: OrgCardProps) { return ( -
-
{cardProps.OrgName}
-
{cardProps.Equity}
-
{cardProps.Members}
- +
+
+

{cardProps.OrgName}

+ +

Your equity: {cardProps.Equity}%

+ +

Members: {cardProps.Members}

+
+ +
); } diff --git a/app/routes/userprofile.tsx b/app/routes/userprofile.tsx new file mode 100644 index 0000000..ea98b7d --- /dev/null +++ b/app/routes/userprofile.tsx @@ -0,0 +1,85 @@ +import Header from '@/components/header'; +import OrgCard from '@/components/org-card'; + +export default function userprofile() { + const orgs = [ + { + OrgName: 'Googil', + Equity: '40', + Members: '3', + ButtonLabel: 'Click here', + }, + { + OrgName: 'Aapil', + Equity: '60', + Members: '10', + ButtonLabel: 'Click here', + }, + ]; + + const recentActivities = [ + { + id: '1', + message: 'John D. submitted time contribution in TechStartup', + timestamp: '2h ago', + }, + { + id: '2', + message: 'Sarah M. voted on your expertise criteria in DesignCo', + timestamp: '5h ago', + }, + { + id: '3', + message: 'New member invitation sent to mark@example.com', + timestamp: '1d ago', + }, + { + id: '4', + message: 'Equity configuration completed for AI Solutions', + timestamp: '2d ago', + }, + ]; + + return ( +
+
+
+
+

My Organizations

+ + +
+
+
+ {orgs.map((org) => ( + { + console.log('View details for:', org.OrgName); + }} + /> + ))} +
+
+ +
+

Recent Activity

+ +
    + {recentActivities.map((activity) => ( +
  • + + + {activity.message} ({activity.timestamp}) + +
    • + ))} +
+
+
+
+ ); +} diff --git a/app/types/header.types.ts b/app/types/header.types.ts new file mode 100644 index 0000000..863b90e --- /dev/null +++ b/app/types/header.types.ts @@ -0,0 +1,3 @@ +export interface HeaderProps { + headerType?: string; +} diff --git a/app/types/user.types.ts b/app/types/user.types.ts index e4a23da..5c4cb3f 100644 --- a/app/types/user.types.ts +++ b/app/types/user.types.ts @@ -2,3 +2,9 @@ import type { UserSchema } from '@/service/database/schema/user.schema'; import type { InferSchemaType } from 'mongoose'; export type IUser = InferSchemaType; + +export interface IRecentActivity { + id: string; + message: string; + timestamp: string; +}