Skip to content
This repository has been archived by the owner on Nov 8, 2024. It is now read-only.

Commit

Permalink
feat: add filter
Browse files Browse the repository at this point in the history
  • Loading branch information
izaakwalz committed May 6, 2024
1 parent 6741115 commit 0e2c10d
Show file tree
Hide file tree
Showing 3 changed files with 54 additions and 12 deletions.
32 changes: 30 additions & 2 deletions src/app/(dashboard)/marketplace/page.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,22 @@
import { Card } from '@/components/cards/card';
import { NFTCard } from '@/components/cards/nft-card';
import { Shell } from '@/components/shell';
import { Button } from '@/components/ui/button';
import { siteConfig } from '@/config/site';
import Image from 'next/image';

export default function Page() {
const collections = ['All', 'Blue', 'Red', 'Pink', 'Orange', 'Purple', 'Teal', 'Coral'];

export default function Page({
searchParams: { collection }
}: {
searchParams: { collection: string };
}) {
const data = siteConfig.nfts.slice(1, 5);

const BASE_URL = '/marketplace';
const selected = collection === undefined ? 'All' : collection;

return (
<Shell>
<Card title="Trending">
Expand All @@ -27,7 +38,24 @@ export default function Page() {
placeholder="Search"
className="w-full rounded-lg border border-border bg-primary px-4 py-2 placeholder:text-border focus:outline-none"
/>
<div></div>
<div className="flex items-center gap-[18px]">
{collections.map((collection: string) => {
const active = selected === collection;
return (
<Button
key={collection}
variant={'outline'}
size={'sm'}
href={`/marketplace?collection=${collection}`}
className={
active ? 'border-primary-300 bg-primary-300/15 text-primary-300' : ''
}
>
{collection}
</Button>
);
})}
</div>
</section>

<section className="flex w-full flex-col gap-8">
Expand Down
28 changes: 20 additions & 8 deletions src/app/(dashboard)/profile/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ type CircleCardProps = {
color: string;
};

const filterButtons = ['All', 'Blue', 'Red', 'Pink', 'Orange', 'Purple', 'Teal', 'Coral'];
const collections = ['All', 'Blue', 'Red', 'Pink', 'Orange', 'Purple', 'Teal', 'Coral'];

const ProfileNFTCard = ({ isShadow, ...nft }: ProfileNFTCardProps) => {
return (
Expand Down Expand Up @@ -111,7 +111,13 @@ const CircleCard = ({ color }: CircleCardProps) => {
);
};

export default function Profile() {
export default function Page({
searchParams: { collection }
}: {
searchParams: { collection: string };
}) {
const BASE_URL = '/profile';
const selected = collection === undefined ? 'All' : collection;
return (
<>
<Shell>
Expand Down Expand Up @@ -185,14 +191,20 @@ export default function Profile() {
</ul>
</section>
<div className="flex gap-3">
{filterButtons.map((button, i) => {
{collections.map((collection: string) => {
const active = selected === collection;
return (
<button
key={i}
className={` rounded-md border border-[#CCCCCC80] px-3 py-1 text-sm font-light text-[#CCCCCC80] shadow-md`}
<Button
key={collection}
variant={'outline'}
size={'sm'}
href={`${BASE_URL}?collection=${collection}`}
className={
active ? 'border-primary-300 bg-primary-300/15 text-primary-300' : ''
}
>
{button}
</button>
{collection}
</Button>
);
})}
</div>
Expand Down
6 changes: 4 additions & 2 deletions src/components/ui/button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,15 @@ const buttonVariants = cva(
'bg-primary-200 hover:bg-primary-200/85 text-foreground disabled:opacity-50 disabled:pointer-events-none transition-colors',
warning:
'bg-primary-400 hover:bg-primary-400/85 text-foreground disabled:opacity-50 disabled:pointer-events-none transition-colors',
outline: '',
outline:
'border-[#CCCCCC80] text-[#CCCCCC80] border font-light font-sans hover:border-primary-300 hover:text-primary-300',
text: 'text-primary-300 text-[1.5rem]/[1.5rem] font-light bg-none border-b border-transparent hover:border-primary-300 rounded-none'
},
size: {
default: 'py-[18px] px-6 text-[1rem]/[1.2rem]',
lg: 'py-4 px-[45px] text-[1rem]',
md: 'py-2 px-6 text-[0.75rem]/[1.1875rem]'
md: 'py-2 px-6 text-[0.75rem]/[1.1875rem]',
sm: 'p-2 text-[0.875rem]/[1.5rem] font-light'
},
fullWidth: {
true: 'w-full'
Expand Down

0 comments on commit 0e2c10d

Please sign in to comment.