Skip to content
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

feat: PFP Collection Page Design Updated #1090

Merged
merged 2 commits into from
Feb 28, 2025
+86 −109
Merged

feat: PFP Collection Page Design Updated #1090

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f01e270
feat: PFP Collection Page Design Updated
Luluameh Feb 28, 2025
9c0bfe1
some fixes
Marchand-Nicolas Feb 28, 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
174 changes: 69 additions & 105 deletions pages/pfpcollections.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,95 +5,82 @@ import PfpNftCard from "../components/pfpcollections/pfpNftCard";
import { ourNfts, NftCollections } from "../utils/constants";
import Step from "@/components/domains/steps/step";

// Define tab configuration
const TABS = [
{
index: 0,
label: "Starknet ID Ecosystem",
iconPrefix: "ecosystem",
collections: ourNfts,
onCardClick: (collection: any) => window.open(collection.infoPage),
},
{
index: 1,
label: "Overall Starknet Ecosystem",
iconPrefix: "starknet",
collections: NftCollections,
onCardClick: (collection: any) => window.open(collection.externalLink),
},
];

const PFPCollections: NextPage = () => {
const [tab, setTab] = useState(0);
const [currentTab, setCurrentTab] = useState(0);

// Render step component with proper icon based on active state
const renderStep = (tabConfig: typeof TABS[0]) => (
<Step
stepIndex={tabConfig.index}
currentStep={currentTab}
setStep={setCurrentTab}
icon={
<img
src={
currentTab === tabConfig.index
? `/icons/${tabConfig.iconPrefix}-active.svg`
: `/icons/${tabConfig.iconPrefix}-inactive.svg`
}
alt={tabConfig.label}
/>
}
label={tabConfig.label}
showDoneIcon={false}
allowSwitchAnytime={true}
/>
);

// Render NFT collection cards
const renderCollectionCards = () => {
const activeTab = TABS[currentTab];
return (
<div className={'mx-auto flex flex-wrap gap-2 justify-center'}>
{activeTab.collections.map((collection, index) => (
<PfpNftCard
key={index}
image={collection.imageUri}
name={collection.name}
onClick={() => activeTab.onCardClick(collection)}
/>
))}
</div>
);
};

return (
<div className="w-full flex flex-col xl:flex-row justify-center gap-4 px-3 py-4 lg:px-32 md:px-16 sm:py-12 xl:h-[88vh] mt-[12vh] xl:mt-[calc(12vh + 1rem)]">
<div className="w-full flex flex-col md:flex-row justify-center gap-4 px-3 py-4 lg:px-32 md:px-16 sm:py-12 h-[88vh] mt-[12vh] xl:mt-[calc(12vh + 1rem)]">
{/* Desktop Navigation */}
<aside className={styles.purchaseStepNav} role="navigation">
<div>
<Step
stepIndex={0}
currentStep={tab}
setStep={setTab}
icon={
<img
src={
tab === 0
? "/icons/ecosystem-active.svg"
: "/icons/ecosystem-inactive.svg"
}
alt="Starknet ID Ecosystem"
/>
}
label="Starknet ID Ecosystem"
showDoneIcon={false}
allowSwitchAnytime={true}
/>
<Step
stepIndex={1}
currentStep={tab}
setStep={setTab}
icon={
<img
src={
tab === 1
? "/icons/starknet-active.svg"
: "/icons/starknet-inactive.svg"
}
alt="Overall Starknet Ecosystem"
/>
}
label="Overall Starknet Ecosystem"
showDoneIcon={false}
allowSwitchAnytime={true}
/>
{TABS.map((tab) => renderStep(tab))}
</div>

<img
src="/visuals/purchaseStepVisual.svg"
alt="Domain purchase steps visualization"
/>
</aside>

{/* Mobile Navigation */}
<div className={styles.purchaseStepNavMobile} role="navigation">
<Step
stepIndex={0}
currentStep={tab}
setStep={setTab}
icon={
<img
src={
tab === 0
? "/icons/ecosystem-active.svg"
: "/icons/ecosystem-inactive.svg"
}
alt="Starknet ID Ecosystem"
/>
}
label="Starknet ID Ecosystem"
showDoneIcon={false}
allowSwitchAnytime={true}
/>
<Step
stepIndex={1}
currentStep={tab}
setStep={setTab}
icon={
<img
src={
tab === 1
? "/icons/starknet-active.svg"
: "/icons/starknet-inactive.svg"
}
alt="Overall Starknet Ecosystem"
/>
}
label="Overall Starknet Ecosystem"
showDoneIcon={false}
allowSwitchAnytime={true}
/>

{TABS.map((tab) => renderStep(tab))}
<div className="flex justify-center">
<img
src="/visuals/purchaseStepVisualMobile.svg"
Expand All @@ -102,37 +89,14 @@ const PFPCollections: NextPage = () => {
</div>
</div>

<div className="flex-1">
{tab === 0 ? (
<section>
<div className={styles.nfts}>
{ourNfts.map((collection, index) => (
<PfpNftCard
key={index}
image={collection.imageUri}
name={collection.name}
onClick={() => window.open(collection.infoPage)}
/>
))}
</div>
</section>
) : (
<section>
<div className={styles.nfts}>
{NftCollections.map((collection, index) => (
<PfpNftCard
key={index}
image={collection.imageUri}
name={collection.name}
onClick={() => window.open(collection.externalLink)}
/>
))}
</div>
</section>
)}
{/* Content Section */}
<div className="flex-1 ">
<section className=" max-w-[680px] mx-auto flex justify-center">
{renderCollectionCards()}
</section>
</div>
</div>
);
};

export default PFPCollections;
export default PFPCollections;
48 changes: 36 additions & 12 deletions styles/pfpcollections.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,13 +29,6 @@
margin-bottom: 48px;
}

.nfts {
margin: 0 150px;
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}

.purchaseStepNav {
display: none;
Expand All @@ -53,38 +46,68 @@
justify-content: center;
align-items: center;
padding-top: 1rem;
box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.06);
}

@media (max-width: 768px) {
/* Mobile styles - apply for smaller devices only */
@media (max-width: 765px) {
.title {
font-size: 24px;
}

.subtitle {
font-size: 14px;
font-weight: lighter;
}

.container {
max-width: 100%;
width: 100%;
padding-right: 0;
}

.nfts {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
padding: 1rem;
margin: 0 ;

margin: 0;
}

.purchaseStepNavMobile {
min-height: fit-content;
width: 100%;
}
}

/* Tablet styles - use desktop-like layout but with adjusted proportions */
@media (min-width: 766px) and (max-width: 1279px) {

.purchaseStepNav {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
width: 200px;
flex-shrink: 0;
background-color: white;
border: 1px solid #4545451a;
border-radius: 16px;
overflow: hidden;
box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.06);
}

.purchaseStepNavMobile {
display: none;
}

.step {
padding: 12px;
}


}

/* Desktop styles */
@media (min-width: 1280px) {
.purchaseStepNav {
display: flex;
Expand All @@ -106,4 +129,5 @@
.step {
padding: 12px;
}
}

}