-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
9606371
commit 17da572
Showing
18 changed files
with
3,629 additions
and
1,577 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,36 +1,41 @@ | ||
'use client'; | ||
import DateBrowser from '@src/components/events/DateBrowser'; | ||
import { type eventParamsSchema } from '@src/utils/eventFilter'; | ||
import useSyncedSearchParams from '@src/utils/useSyncedSearchParams'; | ||
import { type ReactNode } from 'react'; | ||
|
||
type Props = { | ||
children: ReactNode; | ||
searchParams: eventParamsSchema; | ||
}; | ||
|
||
const EventView = ({ children, searchParams }: Props) => { | ||
const [params, setParams] = useSyncedSearchParams(searchParams, '/events'); | ||
|
||
return ( | ||
<div className="w-full px-6"> | ||
<main className="w-full px-6"> | ||
<div className="flex flex-col pt-4 md:flex-row md:items-end md:pb-12 md:pr-7.5"> | ||
<h1 className="h-min align-middle text-2xl font-bold text-[#4D5E80]"> | ||
<h1 className="h-min align-middle text-2xl font-bold text-[#4D5E80]" | ||
id="events-heading"> | ||
Events | ||
</h1> | ||
<div className="relative z-0 mt-2.5 flex flex-row justify-center gap-x-16 md:ml-auto md:mt-0"> | ||
<DateBrowser filterState={params} setParams={setParams} /> | ||
</div> | ||
<nav className="relative z-0 mt-2.5 flex flex-row justify-center gap-x-16 md:ml-auto md:mt-0" | ||
aria-label="Event date filter"> | ||
<DateBrowser filterState={searchParams}/> | ||
</nav> | ||
</div> | ||
<div className="container flex w-full flex-col overflow-x-clip sm:flex-row sm:space-x-7.5 "> | ||
|
||
<section | ||
aria-labelledby="events-heading" | ||
className="container flex w-full flex-col overflow-x-clip sm:flex-row sm:space-x-7.5" | ||
> | ||
<div | ||
data-view={'list'} | ||
className={ | ||
'md:items-normal group flex w-full flex-col items-center space-y-7.5 pt-10' | ||
} | ||
data-view="list" | ||
className="group flex w-full flex-col items-center space-y-7.5 pt-10 md:items-start" | ||
> | ||
{children} | ||
</div> | ||
</div> | ||
</div> | ||
</section> | ||
</main> | ||
); | ||
}; | ||
|
||
export default EventView; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
export default function Loading() { | ||
return ( | ||
<main className="md:pl-72"> | ||
<div className="px-2 md:px-5"> | ||
{/* Carousel skeleton */} | ||
<div className="relative block w-full mb-8"> | ||
<div className="w-full h-[300px] rounded-xl animate-pulse bg-gray-200" /> | ||
</div> | ||
|
||
{/* Tag filter skeleton */} | ||
<div className="mb-8"> | ||
<div className="flex gap-2 flex-wrap"> | ||
{Array.from({ length: 6 }).map((_, i) => ( | ||
<div | ||
key={i} | ||
className="h-8 w-24 rounded-full animate-pulse bg-gray-200" | ||
/> | ||
))} | ||
</div> | ||
</div> | ||
|
||
{/* Club grid skeleton */} | ||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"> | ||
{Array.from({ length: 6 }).map((_, i) => ( | ||
<div | ||
key={i} | ||
className="h-[280px] rounded-xl animate-pulse bg-gray-200" | ||
/> | ||
))} | ||
</div> | ||
</div> | ||
</main> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,27 +1,43 @@ | ||
import { type FC } from 'react'; | ||
import ClubCard from '../ClubCard'; | ||
import { api } from '@src/trpc/server'; | ||
import { getServerAuthSession } from '@src/server/auth'; | ||
import InfiniteScrollGrid from './InfiniteScrollGrid'; | ||
import ScrollTop from './ScrollTop'; | ||
|
||
interface Props { | ||
tag?: string; | ||
} | ||
'use client'; | ||
|
||
import { api } from '@src/trpc/react'; | ||
import { useSearchParams } from 'next/navigation'; | ||
import { useEffect } from 'react'; | ||
import ClubCard, { ClubCardSkeleton } from '../ClubCard'; | ||
import type { Session } from 'next-auth'; | ||
|
||
type Props = { | ||
session: Session | null; | ||
}; | ||
|
||
export default function ClubDirectoryGrid({ session }: Props) { | ||
const searchParams = useSearchParams(); | ||
const tag = searchParams.get('tag'); | ||
|
||
const { data, refetch } = api.club.all.useQuery( | ||
{ tag: tag ?? undefined }, | ||
{ staleTime: 1000 * 60 * 5 } | ||
); | ||
|
||
const ClubDirectoryGrid: FC<Props> = async ({ tag }) => { | ||
const { clubs } = await api.club.all({ tag, limit: 9 }); | ||
const session = await getServerAuthSession(); | ||
useEffect(() => { | ||
void refetch(); | ||
}, [tag, refetch]); | ||
|
||
if (!data) return <ClubDirectoryGridSkeleton />; | ||
|
||
return ( | ||
<div className="grid w-full auto-rows-fr grid-cols-[repeat(auto-fill,320px)] justify-center gap-16 pb-4"> | ||
{clubs.map((club) => ( | ||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"> | ||
{data?.clubs.map((club) => ( | ||
<ClubCard key={club.id} club={club} session={session} priority /> | ||
))} | ||
{clubs.length === 9 && <InfiniteScrollGrid tag={tag} session={session} />} | ||
<ScrollTop /> | ||
</div> | ||
); | ||
}; | ||
} | ||
|
||
export default ClubDirectoryGrid; | ||
function ClubDirectoryGridSkeleton() { | ||
return <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"> | ||
{Array.from({ length: 12 }).map((_, index) => ( | ||
<ClubCardSkeleton key={index} /> | ||
))} | ||
</div> | ||
} |
Oops, something went wrong.