Skip to content

style revamp campaign preview #129

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
stephanniegb merged 2 commits into from
Jun 17, 2025
Merged

style revamp campaign preview #129

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bb87ac3
style revamp campaign preview
stephanniegb Jun 17, 2025
231d65e
Merge branch 'main' into style-revamp-preview-page
stephanniegb Jun 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/components/Fundraiser/FeaturedCampaigns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ const FeaturedCampaigns = () => {
src={campaign.image}
alt={campaign.title}
fill
priority
priority
className="object-cover"
/>
<div
Expand Down
5 changes: 3 additions & 2 deletions app/components/viewImageModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,17 +32,18 @@ const ViewModalImage = ({ images }: CampaignModal) => {

return (
<>
<div className="grid grid-cols-2 gap-3">
<div className="grid grid-cols-2 gap-1">
{images.slice(0, 4).map((imageUrl, index) => (
<div
key={index}
className="relative h-[11rem] w-full cursor-pointer overflow-clip rounded-[5px]"
onClick={() => openModal(index)}
>
<img
<Image
src={imageUrl}
alt={`campaign image ${index + 1}`}
className="object-cover"
fill
/>
{index === 3 && images.length > 4 && (
<div className="absolute inset-0 flex items-center justify-center bg-black/50">
Expand Down
265 changes: 81 additions & 184 deletions app/create/components/ReviewCampaign.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@ import { AllFormFields } from "@/app/create/page";
import { Dialog, DialogContent, DialogTitle } from "@/app/ui/dialog";
import Image from "next/image";
import ProfileIcon from "@/svgs/ProfileIcon";
import CalenderIcon from "@/svgs/CalenderIcon";
import RightArrowIcon from "@/svgs/RightArrowIcon";
import { useEffect, useState } from "react";
import { Spinner } from "@/app/ui/spinner";
import Link from "next/link";
import ReviewCampaignDetails from "./ReviewCampaignDetails";
import ReviewCampaignProgress from "./ReviewCampaignProgress";

const ReviewCampaign = ({
setShowReview,
Expand Down Expand Up @@ -59,195 +59,92 @@ const ReviewCampaign = ({

const width = `${loadingPercentage}%`;

const links = {
...formData.socials,
...Object.fromEntries(
formData.customLinks?.map((link, index) => [
`website${index + 1}`,
link.url
]) || []
)
};

return (
<Dialog open={showReview} onOpenChange={setShowReview}>
<DialogContent
className={`max-h-[90vh] min-h-[70vh] w-[95vw] md:w-[85vw] lg:w-[75vw] xl:w-[65vw] 2xl:max-w-[1200px]`}
>
<DialogContent className="h-screen w-screen max-w-none rounded-none sm:max-w-none">
{!creatingCampaign ? (
<div className="animate-fadeIn space-y-6 p-6">
<div className="mx-auto flex max-w-[800px] flex-col gap-4 sm:flex-row sm:items-center sm:justify-between sm:pr-8">
<DialogTitle className="mt-8 pr-8 font-agrandir text-xl font-bold sm:mt-1 sm:text-2xl">
Campaign Preview
</DialogTitle>
<button
disabled={creatingCampaign}
onClick={createCampaign}
className="flex items-center justify-center rounded-[8px] bg-accent-green px-4 py-2 text-sm text-white transition-all duration-200 sm:w-auto"
>
{creatingCampaign ? <Spinner /> : "Mint Campaign"}
</button>
</div>

<div className="max-h-[75vh] overflow-y-auto">
<div className="mx-auto max-w-[800px] space-y-8">
{imageUrls.length > 0 && (
<div className="relative h-48 w-full overflow-hidden rounded-lg sm:h-64">
<Image
src={imageUrls[0]}
alt="Campaign banner"
fill
className="object-cover"
/>
</div>
)}

<div className="space-y-8">
<h3 className="text-xl text-foreground-primary sm:text-2xl">
<span className="font-agrandir font-bold">Campaign </span>
<span className="font-normal">Highlights</span>
</h3>

<div>
<h4 className="mb-2 font-agrandir text-lg font-semibold">
{formData.name}
</h4>
<p className="leading-8 text-foreground-secondary">
{formData.description}
</p>
{formData.category && (
<div className="mt-2">
<span className="text-sm text-foreground-secondary">
Category:
</span>
<span className="ml-2 font-medium">
{formData.category}
</span>
</div>
)}
</div>

<div className="rounded-lg bg-[#F7F7F6] p-4">
<h4 className="mb-2 font-agrandir text-base font-bold">
Target Amount
</h4>
<p className="text-xl font-bold">{formData.target} STRK</p>
</div>

<div>
<h3 className="mb-6">Organizer and Beneficiary</h3>
<div className="mb-8 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div className="flex items-center gap-2">
<div className="grid h-[40px] w-[40px] place-content-center rounded-full bg-[#F7F7F6]">
<ProfileIcon />
</div>
<div className="max-w-[180px]">
<p className="truncate text-base font-bold">
{formData.organiser}
</p>
<p>Organizer</p>
</div>
</div>
{formData.beneficiary && (
<>
<p className="hidden text-xl text-foreground-secondary sm:block">
<RightArrowIcon />
</p>
<div className="flex items-center gap-2">
<div className="grid h-[40px] w-[40px] place-content-center rounded-full bg-[#F7F7F6]">
<ProfileIcon />
</div>
<div className="max-w-[180px]">
<p className="truncate text-base font-bold">
{formData.beneficiary}
</p>
<p>Beneficiary</p>
</div>
</div>
</>
)}
</div>
<p className="flex items-center gap-2">
<span>
<CalenderIcon />
</span>{" "}
{currentDate}
</p>
<div className="z-[10] mx-auto max-h-[99vh] w-full max-w-[1204px] animate-fadeIn overflow-y-auto pb-40 pt-16 md:px-16 md:pb-20">
<h2 className="mb-6 break-words px-4 font-agrandir text-2xl text-foreground-primary lg:text-3xl">
{formData.name}
</h2>
<div className="text-foreground-primary">
<div className="flex flex-col justify-start gap-4 px-[16px] md:flex-row md:justify-between lg:items-center">
<div className="flex w-auto items-center gap-2 whitespace-nowrap">
<div className="grid min-h-[40px] min-w-[40px] place-content-center rounded-full bg-[#F7F7F6]">
<ProfileIcon />
</div>

{formData.location && (
<div className="rounded-lg bg-[#F7F7F6] p-4">
<h4 className="mb-2 font-agrandir text-base font-bold">
Location
</h4>
<p>{formData.location}</p>
</div>
)}
<p className="whitespace-nowrap">{formData.organiser}</p>
</div>

{(formData.socials || formData.customLinks) && (
<div className="space-y-4">
<h3 className="font-agrandir text-lg font-semibold">
Social Links
</h3>
<div className="grid gap-4 rounded-lg bg-[#F7F7F6] p-4">
{formData.socials &&
Object.entries(formData.socials).map(
([name, url]) =>
url && (
<div key={name}>
<p className="text-sm capitalize text-foreground-secondary">
{name}
</p>
<p className="break-all font-medium">{url}</p>
</div>
)
)}
{formData.customLinks &&
formData.customLinks.length > 0 && (
<div>
<p className="mb-2 text-sm text-foreground-secondary">
Additional Links
</p>
{formData.customLinks.map(
(link, index) =>
link.url && (
<div key={index} className="mt-2">
<p className="text-sm text-foreground-secondary">
Website {index + 1}
</p>
<p className="break-all font-medium">
{link.url}
</p>
</div>
)
)}
</div>
)}
</div>
<div className="flex w-full flex-col flex-wrap justify-between xs:flex-row xs:items-center">
<div className="flex items-center gap-2">
<p className="text-foreground-secondary">category:</p>
<p className="font-semibold">Education</p>
</div>
)}

{imageUrls.length > 1 && (
<div>
<h4 className="mb-4 font-agrandir text-base font-bold text-foreground-primary/80">
More Images
</h4>
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
{imageUrls.slice(1).map((imageUrl, index) => (
<div
key={index}
className="relative h-[11rem] w-full overflow-clip rounded-[5px]"
>
<Image
src={imageUrl}
alt={`campaign image ${index + 1}`}
fill
className="object-cover"
/>
</div>
))}
</div>
</div>
</div>
<div className="relative z-[9] mb-8 mt-3 h-[389px] max-w-[1204px] overflow-hidden md:mx-[16px] md:h-[31rem] md:rounded-[10px] lg:mx-0">
<div
className="absolute inset-0 scale-110 bg-cover bg-center blur-xl"
style={{ backgroundImage: `url(${imageUrls[0]})` }}
/>

<Image
className="relative h-full w-full object-contain md:rounded-[10px]"
loader={() => imageUrls[0]}
src={imageUrls[0]}
unoptimized
priority
fill
alt={`${formData.name} banner image`}
/>
</div>
</div>
<div className="flex flex-col-reverse gap-4 px-4 md:px-[16px] lg:flex-row">
<ReviewCampaignDetails
description={formData.description}
organizer={formData.organiser}
beneficiary={formData.beneficiary}
date={currentDate}
images={imageUrls.slice(1)}
socialLinks={links}
/>
<ReviewCampaignProgress
balance={0}
target={formData.target}
location={formData.location}
donationCount={0}
socialLinks={links}
/>
<div className="fixed bottom-0 left-1/2 flex w-full -translate-x-1/2 justify-between bg-white py-4">
<div className="mx-auto flex w-full max-w-[1204px] flex-col justify-between gap-2 px-4 md:flex-row md:items-center">
<DialogTitle className="m-0 font-agrandir text-xl font-bold sm:mt-1 sm:text-2xl">
Campaign Preview
</DialogTitle>
<div className="flex flex-wrap justify-between gap-2 md:justify-normal">
<button
onClick={() => setShowReview(false)}
className="flex w-full justify-center rounded-[8px] border border-gray-300 px-6 py-2 text-sm text-foreground-primary hover:bg-gray-50 sm:w-auto"
>
Edit Campaign
</button>
<button
disabled={creatingCampaign}
onClick={createCampaign}
className="flex w-full items-center justify-center rounded-[8px] bg-accent-green px-4 py-2 text-sm text-white transition-all duration-200 sm:w-auto"
>
{creatingCampaign ? <Spinner /> : "Mint Campaign"}
</button>
</div>
)}

<div className="flex justify-center pt-4">
<button
onClick={() => setShowReview(false)}
className="rounded-[8px] border border-gray-300 px-6 py-2 text-sm text-foreground-secondary hover:bg-gray-50"
>
Edit Campaign
</button>
</div>
</div>
</div>
Expand Down
Loading