Merge pull request #162 from MAGICGrants/project-page-improvements

feat: project page improvements
This commit is contained in:
Artur
2025-04-04 15:27:29 -03:00
committed by GitHub
2 changed files with 10 additions and 20 deletions

View File

@@ -28,20 +28,20 @@ export default function PageHeading({ project, children }: Props) {
return (
<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 ? (
<Image
src={project.coverImage}
alt="avatar"
width={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 && (
<CustomLink
className="text-inherit hover:text-inherit hover:underline"
@@ -87,7 +87,7 @@ export default function PageHeading({ project, children }: Props) {
</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}
</div>
</div>

View File

@@ -67,17 +67,15 @@ const Project: NextPage<SingleProjectPageProps> = ({ project, donationStats }) =
<div className="divide-y divide-gray-200">
<PageHeading project={project}>
<div className="w-full flex flex-col items-center gap-4 xl:flex">
{coverImage ? (
<div className="w-full flex flex-col items-center gap-4">
{coverImage && (
<Image
src={coverImage}
alt="avatar"
width={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">
@@ -172,7 +170,7 @@ const Project: NextPage<SingleProjectPageProps> = ({ project, donationStats }) =
</div>
<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 || '') }}
/>
</PageHeading>
@@ -249,13 +247,5 @@ export async function getServerSideProps({ params, resolvedUrl }: GetServerSideP
})
}
return {
props: {
project: {
...project,
content,
},
donationStats,
},
}
return { props: { project: { ...project, content }, donationStats } }
}