MAGICGrants/campaign-site
1
0
Fork 0
mirror of https://github.com/MAGICGrants/campaign-site.git synced 2026-01-09 12:27:59 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: project page improvements

Browse Source
This commit is contained in:
Artur
2025-04-04 15:25:05 -03:00
parent ba68d08906
commit 573117d1a1
2 changed files with 10 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/PageHeading.tsx
View File

@@ -28,20 +28,20 @@ export default function PageHeading({ project, children }: Props) {
return ( return (
<div className="divide-y divide-gray-200"> <div className="divide-y divide-gray-200">
<div className="items-start space-y-2 pb-8 pt-6 md:space-y-5 xl:grid xl:grid-cols-3 xl:gap-x-8"> <div className="items-start pb-8 pt-6 md:space-y-5 md:grid md:grid-cols-3 md:gap-x-10">
{project.coverImage ? ( {project.coverImage ? (
<Image <Image
src={project.coverImage} src={project.coverImage}
alt="avatar" alt="avatar"
width={300} width={300}
height={300} height={300}
className="h-60 w-60 mx-auto my-auto object-contain row-span-3 hidden xl:block" className="w-full mx-auto my-auto object-contain row-span-3 hidden md:block"
/> />
) : ( ) : (
<PlaceholderImage className="w-60 h-60 mx-auto my-auto object-contain row-span-3 hidden xl:block" /> <PlaceholderImage className="w-60 h-60 mx-auto my-auto object-contain row-span-3 hidden md:block" />
)} )}
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14 xl:col-span-2"> <h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14 md:col-span-2">
{!!project.website && ( {!!project.website && (
<CustomLink <CustomLink
className="text-inherit hover:text-inherit hover:underline" className="text-inherit hover:text-inherit hover:underline"
@@ -87,7 +87,7 @@ export default function PageHeading({ project, children }: Props) {
</div> </div>
</div> </div>
<div className="pt-4 items-start space-y-2 xl:grid xl:grid-cols-3 xl:gap-x-4 xl:space-y-0"> <div className="pt-4 items-start space-y-4 md:grid md:grid-cols-3 md:space-x-4 md:space-y-0">
{children} {children}
</div> </div>
</div> </div>

20
pages/[fund]/projects/[slug].tsx
View File

@@ -67,17 +67,15 @@ const Project: NextPage<SingleProjectPageProps> = ({ project, donationStats }) =
<div className="divide-y divide-gray-200"> <div className="divide-y divide-gray-200">
<PageHeading project={project}> <PageHeading project={project}>
<div className="w-full flex flex-col items-center gap-4 xl:flex"> <div className="w-full flex flex-col items-center gap-4">
{coverImage ? ( {coverImage && (
<Image <Image
src={coverImage} src={coverImage}
alt="avatar" alt="avatar"
width={700} width={700}
height={700} height={700}
className="w-full max-w-[700px] mx-auto object-contain xl:hidden" className="w-full max-w-96 mx-auto object-contain md:hidden"
/> />
) : (
<PlaceholderImage className="w-full max-w-[700px] mx-auto object-contain xl:hidden" />
)} )}
<div className="w-full max-w-96 space-y-6 p-6 bg-white rounded-lg"> <div className="w-full max-w-96 space-y-6 p-6 bg-white rounded-lg">
@@ -172,7 +170,7 @@ const Project: NextPage<SingleProjectPageProps> = ({ project, donationStats }) =
</div> </div>
<article <article
className="prose max-w-none mt-4 p-6 xl:col-span-2 bg-white rounded-lg" className="prose max-w-none mt-4 p-6 col-span-2 bg-white rounded-lg"
dangerouslySetInnerHTML={{ __html: xss(content || '') }} dangerouslySetInnerHTML={{ __html: xss(content || '') }}
/> />
</PageHeading> </PageHeading>
@@ -249,13 +247,5 @@ export async function getServerSideProps({ params, resolvedUrl }: GetServerSideP
}) })
} }
return { return { props: { project: { ...project, content }, donationStats } }
props: {
project: {
...project,
content,
},
donationStats,
},
}
} }