+ shadow

Arakasi21 · May 28, 2024 · 6c72385 · 6c72385
1 parent b9fea53
commit 6c72385
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 19 deletions.
diff --git a/src/app/clubs/[clubID]/page.tsx b/src/app/clubs/[clubID]/page.tsx
@@ -15,6 +15,7 @@ import { Event } from '@/types/event'
 import ClubMembersCard from '@/components/clubs/ClubMembersCard'
 import ClubMembersDialog from '@/components/clubs/ClubMembersDialog'
 import ClubPageButtons from '@/components/clubs/ClubPageButtons'
+import BackgroundClubImage from '@/components/clubs/BackgroundClubImage'
 
 function Page({ params }: { params: { clubID: number } }) {
 	const { isLoggedIn, user } = useUserStore()
@@ -69,15 +70,24 @@ function Page({ params }: { params: { clubID: number } }) {
 				{loading ? (
 					<SceletonClub />
 				) : (
-					<div className="px-0">
-						<div
-							style={{
-								backgroundImage: `url(${club?.banner_url ?? '/main_photo.jpeg'})`,
-								zIndex: 1,
-							}}
-							className="from-dark-mode-gradient-start before:h-150 absolute h-80 w-full rounded-t-lg bg-gradient-to-t to-transparent bg-cover bg-center opacity-80 before:absolute before:-bottom-1 before:left-0 before:right-0 before:block before:bg-black/[.9] before:content-[] after:absolute after:-bottom-1 after:z-20 after:block after:h-40 after:bg-gradient-to-t after:from-cyan-500 after:to-blue-500  after:content-[]"
-						/>
-						<div className="relative z-30 mx-auto max-w-6xl pt-56">
+					<div className="relative">
+						<div className="absolute h-[320px] w-full overflow-hidden rounded-sm shadow-2xl shadow-[#020817]/40">
+							<img
+								className="z-1 h-full w-full object-cover object-center "
+								height={600}
+								src={club?.banner_url}
+								style={{
+									aspectRatio: '1920/600',
+									objectFit: 'cover',
+								}}
+								width={1920}
+							/>
+							<div className="z-1 absolute inset-0 bg-gradient-to-b from-transparent/30 to-[#020817]/80" />
+							<div className="z-1 absolute inset-x-0 bottom-0 h-2/3 bg-gradient-to-t from-[#020817]/90" />
+						</div>
+
+						<div className="relative z-30 mx-auto max-w-[800px] pt-24">
+							<BackgroundClubImage club={club} />
 							<div className="z-50 rounded-lg bg-[#0c1125]">
 								<div className="flex items-center justify-between gap-4 p-6">
 									<div className="flex items-center gap-2">

diff --git a/src/app/clubs/[clubID]/settings/page.tsx b/src/app/clubs/[clubID]/settings/page.tsx
@@ -84,8 +84,21 @@ function Page({ params }: { params: { clubID: number } }) {
 	return (
 		<main className="scroll-smooth" style={{ scrollBehavior: 'smooth' }}>
 			<Nav />
-
-			<div className=" max-w-6xl py-12 sm:p-12 md:mx-auto">
+			<div className="absolute h-[320px] w-full overflow-hidden rounded-sm shadow-2xl shadow-[#020817]/40">
+				<img
+					className="z-1 h-full w-full object-cover object-center "
+					height={600}
+					src={club?.banner_url}
+					style={{
+						aspectRatio: '1920/600',
+						objectFit: 'cover',
+					}}
+					width={1920}
+				/>
+				<div className="z-1 absolute inset-0 bg-gradient-to-b from-transparent/30 to-[#020817]/80" />
+				<div className="z-1 absolute inset-x-0 bottom-0 h-2/3 bg-gradient-to-t from-[#020817]/90" />
+			</div>
+			<div className="relative z-30 max-w-6xl py-12 sm:p-12 md:mx-auto">
 				<BackgroundClubImage club={club} />
 				<div className=" rounded-lg bg-[#0c1125]">
 					<div className="flex items-center justify-between gap-4 p-6">

diff --git a/src/hooks/usePendingClubs.ts b/src/hooks/usePendingClubs.ts
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 import useUserStore from '@/store/user'
 import { useAxiosInterceptor } from '@/helpers/fetch_api'
+import { toast } from 'sonner'
 
 export default function usePendingClubs() {
 	const [pendingClubs, setPendingClubs] = useState(0)
@@ -13,17 +14,26 @@ export default function usePendingClubs() {
 				console.error('JWT token is missing')
 				return
 			}
-			const response = await axiosAuth(
-				`${process.env.NEXT_PUBLIC_BACKEND_URL}/clubs/pending?page=1&page_size=25`,
-				{},
-			)
-			if (response.status.toString().startsWith('2')) {
-				if (response.data.metadata.total_records) {
-					setPendingClubs(response.data.metadata.total_records)
+			try {
+				const response = await axiosAuth(
+					`${process.env.NEXT_PUBLIC_BACKEND_URL}/clubs/pending?page=1&page_size=25`,
+					{},
+				)
+				if (response.status.toString().startsWith('2')) {
+					if (response.data.metadata.total_records) {
+						setPendingClubs(response.data.metadata.total_records)
+					}
+				}
+			} catch (error) {
+				if (typeof error === 'object' && error !== null && 'response' in error) {
+					const axiosError = error as { response: { status: number } }
+					if (axiosError.response.status === 401) {
+						toast.error('Login again!')
+					}
 				}
 			}
+			fetchPendingClubs()
 		}
-		fetchPendingClubs()
 	}, [userStore.jwt_token])
 
 	return pendingClubs