MythEclipse/imphnen-frontend-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: optimize placeholder banner image & minor fix dark mode

Browse Source
This commit is contained in:
Hafid Nur
2025-11-26 16:35:49 +07:00
parent 810dbaa0ca
commit 00df69fb93
5 changed files with 142 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/hackathon/public/images/banner-imphnen.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 MiB

apps/hackathon/public/images/banner-imphnen.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 109 KiB

apps/hackathon/src/app/teams/browse/page.tsx
+49 -20
View File
@@ -1,7 +1,14 @@
import { FC, ReactElement, useState, useEffect } from 'react';
import { Button } from '@imphnen-frontend-service/ui/atoms';
import { Link, useNavigate } from 'react-router';
import { useTeams, useJoinTeam, useMyTeams, ETeamVisibility, joinTeamSchema, TJoinTeamForm } from '@imphnen-frontend-service/service';
import {
useTeams,
useJoinTeam,
useMyTeams,
ETeamVisibility,
joinTeamSchema,
TJoinTeamForm,
} from '@imphnen-frontend-service/service';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { CitySelect } from '../../../components/city-select';
@@ -69,8 +76,12 @@ const BrowseTeamsPage: FC = (): ReactElement => {
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
<div className="flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold text-gray-900 dark:text-white">Browse Teams</h1>
<p className="text-gray-600 dark:text-neutral-400 mt-1">Find and join teams looking for members</p>
<h1 className="text-3xl font-bold text-gray-900 dark:text-white">
Browse Teams
</h1>
<p className="text-gray-600 dark:text-neutral-400 mt-1">
Find and join teams looking for members
</p>
</div>
<Link to="/dashboard" className="hidden md:block">
<Button variant="secondary">Back to Dashboard</Button>
@@ -111,19 +122,28 @@ const BrowseTeamsPage: FC = (): ReactElement => {
{/* Teams List */}
{isLoading ? (
<div className="text-center py-12">
<p className="text-gray-600 dark:text-neutral-400">Loading teams...</p>
<p className="text-gray-600 dark:text-neutral-400">
Loading teams...
</p>
</div>
) : teams.length === 0 ? (
<div className="bg-white dark:bg-neutral-900 rounded-lg shadow-sm p-12 text-center">
<p className="text-gray-600 dark:text-neutral-400 text-lg">No teams found</p>
<p className="text-gray-500 dark:text-neutral-500 mt-2">Try adjusting your filters</p>
<p className="text-gray-600 dark:text-neutral-400 text-lg">
No teams found
</p>
<p className="text-gray-500 dark:text-neutral-500 mt-2">
Try adjusting your filters
</p>
</div>
) : (
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
{teams.map((team) => (
<div key={team.id} className="bg-white dark:bg-neutral-800 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow flex flex-col">
<div
key={team.id}
className="bg-white dark:bg-neutral-800 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow flex flex-col"
>
<img
src={team.banner || '/images/banner-imphnen.png'}
src={team.banner || '/images/banner-imphnen.webp'}
alt={team.name}
className="w-full h-32 object-cover"
/>
@@ -137,14 +157,22 @@ const BrowseTeamsPage: FC = (): ReactElement => {
/>
) : (
<div className="w-12 h-12 rounded-full bg-gray-200 dark:bg-neutral-700 flex items-center justify-center">
<span className="text-gray-500 dark:text-neutral-400 text-xl">👥</span>
<span className="text-gray-500 dark:text-neutral-400 text-xl">
👥
</span>
</div>
)}
<div className="flex-1 min-w-0">
<h3 className="text-lg font-bold text-gray-900 dark:text-white line-clamp-2">{team.name}</h3>
<h3 className="text-lg font-bold text-gray-900 dark:text-white line-clamp-2">
{team.name}
</h3>
<div className="text-sm text-gray-600 dark:text-neutral-400 flex gap-2">
<p className="truncate flex-1 min-w-0">📍 {team.city}</p>
<p className="whitespace-nowrap shrink-0">👥 {team.members?.length || 0} members</p>
<p className="truncate flex-1 min-w-0">
📍 {team.city}
</p>
<p className="whitespace-nowrap shrink-0">
👥 {team.members?.length || 0} members
</p>
</div>
</div>
</div>
@@ -162,14 +190,15 @@ const BrowseTeamsPage: FC = (): ReactElement => {
</Button>
) : (
<>
{myTeams.length === 0 && (team.members?.length || 0) < 5 && (
<Button
className="w-full"
onClick={() => handleJoinRequest(team.id)}
>
Request to Join
</Button>
)}
{myTeams.length === 0 &&
(team.members?.length || 0) < 5 && (
<Button
className="w-full"
onClick={() => handleJoinRequest(team.id)}
>
Request to Join
</Button>
)}
<Button
className="w-full"
variant="secondary"
apps/hackathon/src/app/teams/layout.tsx
+3 -1
View File
@@ -31,7 +31,9 @@ const TeamsLayout: FC = (): ReactElement => {
/>
</svg>
</button>
<h1 className="ml-3 text-lg font-bold text-gray-900">Hackathon</h1>
<h1 className="ml-3 text-lg font-bold text-gray-900 dark:text-white">
Hackathon
</h1>
</div>
</div>
apps/hackathon/src/app/users/[userId]/page.tsx
+90 -27
View File
@@ -1,7 +1,10 @@
import { FC, ReactElement } from 'react';
import { Button } from '@imphnen-frontend-service/ui/atoms';
import { useParams, useNavigate, Link } from 'react-router';
import { useUserDetailsById, useTeamsByUserId } from '@imphnen-frontend-service/service';
import {
useUserDetailsById,
useTeamsByUserId,
} from '@imphnen-frontend-service/service';
const UserProfilePage: FC = (): ReactElement => {
const { userId } = useParams<{ userId: string }>();
@@ -15,7 +18,9 @@ const UserProfilePage: FC = (): ReactElement => {
if (isLoading) {
return (
<div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-neutral-950">
<div className="text-gray-600 dark:text-neutral-400">Loading user profile...</div>
<div className="text-gray-600 dark:text-neutral-400">
Loading user profile...
</div>
</div>
);
}
@@ -23,9 +28,15 @@ const UserProfilePage: FC = (): ReactElement => {
if (error || !user) {
return (
<div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-neutral-950">
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">User not found</h2>
{error && <p className="text-red-600 dark:text-red-400 mb-4">{String(error)}</p>}
<Button onClick={() => navigate('/dashboard')}>Back to Dashboard</Button>
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
User not found
</h2>
{error && (
<p className="text-red-600 dark:text-red-400 mb-4">{String(error)}</p>
)}
<Button onClick={() => navigate('/dashboard')}>
Back to Dashboard
</Button>
</div>
);
}
@@ -45,15 +56,23 @@ const UserProfilePage: FC = (): ReactElement => {
/>
) : (
<div className="w-16 h-16 md:w-20 md:h-20 rounded-full bg-gray-200 dark:bg-neutral-700 flex items-center justify-center border-4 border-white dark:border-neutral-800 shadow-lg">
<span className="text-gray-500 dark:text-neutral-400 text-2xl md:text-3xl">👤</span>
<span className="text-gray-500 dark:text-neutral-400 text-2xl md:text-3xl">
👤
</span>
</div>
)}
<div>
<h1 className="text-xl md:text-3xl font-bold text-gray-900 dark:text-white">{user.fullname}</h1>
<p className="text-sm md:text-base text-gray-600 dark:text-neutral-400 mt-1">{user.email}</p>
<h1 className="text-xl md:text-3xl font-bold text-gray-900 dark:text-white">
{user.fullname}
</h1>
<p className="text-sm md:text-base text-gray-600 dark:text-neutral-400 mt-1">
{user.email}
</p>
{user.location && (
<div className="flex items-center space-x-4 mt-2">
<span className="text-sm text-gray-500 dark:text-neutral-500">📍 {user.location}</span>
<span className="text-sm text-gray-500 dark:text-neutral-500">
📍 {user.location}
</span>
</div>
)}
</div>
@@ -72,15 +91,21 @@ const UserProfilePage: FC = (): ReactElement => {
{/* About Section */}
{user.bio && (
<div className="bg-white dark:bg-neutral-900 rounded-lg shadow-md dark:shadow-neutral-950/50 p-4 md:p-6 overflow-hidden">
<h2 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">About</h2>
<p className="text-gray-700 dark:text-neutral-300 break-all overflow-wrap-anywhere">{user.bio}</p>
<h2 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
About
</h2>
<p className="text-gray-700 dark:text-neutral-300 break-all overflow-wrap-anywhere">
{user.bio}
</p>
</div>
)}
{/* Skills Section */}
{user.skills && user.skills.length > 0 && (
<div className="bg-white dark:bg-neutral-900 rounded-lg shadow-md dark:shadow-neutral-950/50 p-4 md:p-6">
<h2 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">Skills</h2>
<h2 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
Skills
</h2>
<div className="flex flex-wrap gap-3">
{user.skills.map((skill: string) => (
<span
@@ -97,23 +122,47 @@ const UserProfilePage: FC = (): ReactElement => {
{/* Teams Section */}
{userTeams.length > 0 ? (
<div className="bg-white dark:bg-neutral-900 rounded-lg shadow-md dark:shadow-neutral-950/50 p-4 md:p-6">
<h2 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">Teams ({userTeams.length})</h2>
<h2 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
Teams ({userTeams.length})
</h2>
<div className="grid gap-4 md:grid-cols-2">
{userTeams.map((team: any) => (
<Link key={team.id} to={'/teams/' + team.id} className="bg-white dark:bg-neutral-800 rounded-lg shadow-md dark:shadow-neutral-950/50 overflow-hidden hover:shadow-lg transition-shadow">
<img src={team.banner || '/images/banner-imphnen.png'} alt={team.name} className="w-full h-24 object-cover" />
<Link
key={team.id}
to={'/teams/' + team.id}
className="bg-white dark:bg-neutral-800 rounded-lg shadow-md dark:shadow-neutral-950/50 overflow-hidden hover:shadow-lg transition-shadow"
>
<img
src={team.banner || '/images/banner-imphnen.webp'}
alt={team.name}
className="w-full h-24 object-cover"
/>
<div className="p-4">
<div className="flex items-center space-x-3 mb-2">
{team.logo && <img src={team.logo} alt={team.name} className="w-10 h-10 rounded-full object-cover" />}
{team.logo && (
<img
src={team.logo}
alt={team.name}
className="w-10 h-10 rounded-full object-cover"
/>
)}
<div className="flex-1 min-w-0">
<h3 className="font-bold text-gray-900 dark:text-white line-clamp-2">{team.name}</h3>
<h3 className="font-bold text-gray-900 dark:text-white line-clamp-2">
{team.name}
</h3>
<div className="text-sm text-gray-600 dark:text-neutral-400 flex gap-2">
<p className="truncate flex-1 min-w-0">📍 {team.city}</p>
<p className="whitespace-nowrap shrink-0">👥 {team.members?.length || 0} members</p>
<p className="truncate flex-1 min-w-0">
📍 {team.city}
</p>
<p className="whitespace-nowrap shrink-0">
👥 {team.members?.length || 0} members
</p>
</div>
</div>
</div>
<p className="text-gray-600 dark:text-neutral-400 text-sm line-clamp-2">{team.description}</p>
<p className="text-gray-600 dark:text-neutral-400 text-sm line-clamp-2">
{team.description}
</p>
</div>
</Link>
))}
@@ -121,10 +170,14 @@ const UserProfilePage: FC = (): ReactElement => {
</div>
) : (
<div className="bg-white dark:bg-neutral-900 rounded-lg shadow-md dark:shadow-neutral-950/50 p-4 md:p-6">
<h2 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">Teams</h2>
<h2 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
Teams
</h2>
<div className="text-center py-8">
<div className="text-4xl mb-3">👥</div>
<p className="text-gray-600 dark:text-neutral-400">Not in any team yet</p>
<p className="text-gray-600 dark:text-neutral-400">
Not in any team yet
</p>
</div>
</div>
)}
@@ -134,16 +187,26 @@ const UserProfilePage: FC = (): ReactElement => {
<div className="space-y-4 md:space-y-6">
{/* Contact Info */}
<div className="bg-white dark:bg-neutral-900 rounded-lg shadow-md dark:shadow-neutral-950/50 p-4 md:p-6">
<h3 className="text-base md:text-lg font-bold text-gray-900 dark:text-white mb-3 md:mb-4">Contact Information</h3>
<h3 className="text-base md:text-lg font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
Contact Information
</h3>
<div className="space-y-3">
<div>
<p className="text-sm text-gray-600 dark:text-neutral-400">Email</p>
<p className="text-gray-900 dark:text-white font-medium">{user.email}</p>
<p className="text-sm text-gray-600 dark:text-neutral-400">
Email
</p>
<p className="text-gray-900 dark:text-white font-medium">
{user.email}
</p>
</div>
{user.location && (
<div>
<p className="text-sm text-gray-600 dark:text-neutral-400">Location</p>
<p className="text-gray-900 dark:text-white font-medium">{user.location}</p>
<p className="text-sm text-gray-600 dark:text-neutral-400">
Location
</p>
<p className="text-gray-900 dark:text-white font-medium">
{user.location}
</p>
</div>
)}
</div>