Skip to content

Commit

Permalink
refactor: new layout and add shuffling
Browse files Browse the repository at this point in the history
  • Loading branch information
@kyziq
kyziq committed Jan 11, 2024
1 parent 34eb52a commit 86b564e
Showing 1 changed file with 157 additions and 156 deletions.
313 changes: 157 additions & 156 deletions src/pages/MoreArt.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useState } from 'react';
import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import {
Card,
Expand Down Expand Up @@ -35,6 +35,7 @@ import {
const MoreArt = () => {
const navigate = useNavigate();
const [savedStates, setSavedStates] = useState({});
const [shuffledLists, setShuffledLists] = useState([]);
const shareUrl = 'https://kyziq.github.io/artistry-hub/';
const title = 'Artistry-Hub';
const fixedWidth = '250px';
Expand All @@ -59,169 +60,169 @@ const MoreArt = () => {
event.stopPropagation();
};

// Function to shuffle the lists
const shuffleLists = (lists) => {
const shuffled = lists.map((list) =>
[...list].sort(() => 0.5 - Math.random())
);
return [].concat(...shuffled);
};

useEffect(() => {
// Shuffle the images once when the component is mounted
setShuffledLists(shuffleLists(Object.values(allLists)));
}, []);

return (
<div className="mt-10">
<div className="flex flex-wrap justify-start items-center gap-4 mt-4">
{Object.values(allLists).map((categoryList, categoryIndex) => (
<div key={categoryIndex} className="flex gap-4 flex-wrap">
{categoryList.map((item, index) => (
<Tooltip
key={`tooltip-${categoryIndex}-${index}`}
content={item.name}
placement="top"
color="foreground"
showArrow
>
<Card
key={`card-${categoryIndex}-${index}`}
shadow="sm"
isPressable
onClick={() => handleImageClick(item.id)}
className="relative overflow-hidden inline-block group transition-opacity duration-300 hover:opacity-90"
style={{
margin: '0 0 1.5em',
width: fixedWidth,
height: '100%',
}}
<div className="flex flex-wrap justify-center items-center gap-4 mt-4">
{shuffledLists.map((item, index) => (
<Tooltip
key={index}
content={item.name}
placement="top"
color="foreground"
showArrow
>
<Card
key={index}
shadow="sm"
isPressable
onClick={() => handleImageClick(item.id)}
className="relative overflow-hidden inline-block group transition-opacity duration-300 hover:opacity-90"
style={{
margin: '0 0 1.5em',
width: fixedWidth,
height: '100%',
}}
>
<CardHeader className="absolute z-10 top-1 right-1 flex justify-end items-start opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<Button
color={savedStates[index] ? 'primary' : 'default'}
radius="full"
size="sm"
variant="bordered"
onPress={() => toggleSaveState(index)}
className={`${
savedStates[index]
? 'bg-primary-500 hover:bg-primary-600 text-white border-primary-500'
: 'bg-white hover:bg-gray-100 text-gray-700 border-gray-300'
} font-semibold py-2 px-4 rounded-full shadow-sm transition duration-300 ease-in-out`}
>
<CardHeader className="absolute z-10 top-1 right-1 flex justify-end items-start opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<Button
color={savedStates[index] ? 'primary' : 'default'}
radius="full"
size="sm"
variant="bordered"
onPress={() => toggleSaveState(index)}
className={`${
savedStates[index]
? 'bg-primary-500 hover:bg-primary-600 text-white border-primary-500'
: 'bg-white hover:bg-gray-100 text-gray-700 border-gray-300'
} font-semibold py-2 px-4 rounded-full shadow-sm transition duration-300 ease-in-out`}
>
{savedStates[index] ? 'Saved' : 'Save'}
</Button>
</CardHeader>
<Image
removeWrapper
shadow="sm"
radius="lg"
alt={item.name}
className="object-cover -z-1 w-full h-full"
src={item.img}
/>
<CardFooter className="justify-between before:bg-white/10 overflow-hidden py-1 absolute before:rounded-sm rounded-small bottom-1 w-[calc(100%_-_5px)] shadow-small ml-1 z-10 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
<div className="flex gap-4 items-center">
<Dropdown backdrop="blur" onClick={handleDropdownClick}>
<DropdownTrigger>
<Button
size="sm"
className="p-1 transition-all duration-300 ease-in-out bg-blue-500 hover:bg-blue-600 text-white rounded-full shadow hover:shadow-lg"
>
<FaShareAlt className="text-sm pointer-events-none flex-shrink-0" />
</Button>
</DropdownTrigger>
<DropdownMenu
variant="faded"
aria-label="Static Actions"
{savedStates[index] ? 'Saved' : 'Save'}
</Button>
</CardHeader>
<Image
removeWrapper
shadow="sm"
radius="lg"
alt={item.name}
className="object-cover -z-1 w-full h-full"
src={item.img}
/>
<CardFooter className="justify-between before:bg-white/10 overflow-hidden py-1 absolute before:rounded-sm rounded-small bottom-1 w-[calc(100%_-_5px)] shadow-small ml-1 z-10 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
<div className="flex gap-4 items-center">
<Dropdown backdrop="blur" onClick={handleDropdownClick}>
<DropdownTrigger>
<Button
size="sm"
className="p-1 transition-all duration-300 ease-in-out bg-blue-500 hover:bg-blue-600 text-white rounded-full shadow hover:shadow-lg"
>
<FaShareAlt className="text-sm pointer-events-none flex-shrink-0" />
</Button>
</DropdownTrigger>
<DropdownMenu variant="faded" aria-label="Static Actions">
<DropdownItem key="facebook" className="cursor-pointer">
<FacebookShareButton
url={shareUrl}
title={title}
className="flex items-center"
>
<DropdownItem
key="facebook"
className="cursor-pointer"
>
<FacebookShareButton
url={shareUrl}
title={title}
className="flex items-center"
>
<FacebookIcon size={32} round />
<span className="ml-2">Facebook</span>
</FacebookShareButton>
</DropdownItem>

<DropdownItem
key="whatsapp"
className="cursor-pointer"
>
<WhatsappShareButton
url={shareUrl}
title={title}
className="flex items-center"
>
<WhatsappIcon size={32} round />
<span className="ml-2">Whatsapp</span>
</WhatsappShareButton>
</DropdownItem>
<FacebookIcon size={32} round />
<span className="ml-2">Facebook</span>
</FacebookShareButton>
</DropdownItem>

<DropdownItem key="x" className="cursor-pointer">
<TwitterShareButton
url={shareUrl}
title={title}
className="flex items-center"
>
<TwitterIcon size={32} round />
<span className="ml-2">Twitter</span>
</TwitterShareButton>
</DropdownItem>
<DropdownItem key="whatsapp" className="cursor-pointer">
<WhatsappShareButton
url={shareUrl}
title={title}
className="flex items-center"
>
<WhatsappIcon size={32} round />
<span className="ml-2">Whatsapp</span>
</WhatsappShareButton>
</DropdownItem>

<DropdownItem key="reddit" className="cursor-pointer">
<RedditShareButton
url={shareUrl}
title={title}
className="flex items-center"
>
<RedditIcon size={32} round />
<span className="ml-2">Reddit</span>
</RedditShareButton>
</DropdownItem>
<DropdownItem key="email" className="cursor-pointer">
<EmailShareButton
url={shareUrl}
title={title}
className="flex items-center"
>
<EmailIcon size={32} round />
<span className="ml-2">Email </span>
</EmailShareButton>
</DropdownItem>
</DropdownMenu>
</Dropdown>
<DropdownItem key="x" className="cursor-pointer">
<TwitterShareButton
url={shareUrl}
title={title}
className="flex items-center"
>
<TwitterIcon size={32} round />
<span className="ml-2">Twitter</span>
</TwitterShareButton>
</DropdownItem>

<Dropdown onClick={handleDropdownClick}>
<DropdownTrigger>
<Button
size="sm"
className="p-1 transition-all duration-300 ease-in-out bg-gray-300 hover:bg-gray-400 rounded-full shadow hover:shadow-lg"
>
<FaEllipsisV className="text-gray-800 pointer-events-none flex-shrink-0" />
</Button>
</DropdownTrigger>
<DropdownMenu
variant="faded"
aria-label="Dropdown menu with icons"
<DropdownItem key="reddit" className="cursor-pointer">
<RedditShareButton
url={shareUrl}
title={title}
className="flex items-center"
>
<RedditIcon size={32} round />
<span className="ml-2">Reddit</span>
</RedditShareButton>
</DropdownItem>
<DropdownItem key="email" className="cursor-pointer">
<EmailShareButton
url={shareUrl}
title={title}
className="flex items-center"
>
<DropdownItem
onClick={() => handleDownload(item.img, item.name)}
startContent={
<FaDownload className="text-default-500 pointer-events-none flex-shrink-0" />
}
>
Download
</DropdownItem>
<DropdownItem
key="logout"
className="text-danger"
color="danger"
startContent={<FaExclamationTriangle />}
>
Report
</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
</CardFooter>
</Card>
</Tooltip>
))}
</div>
<EmailIcon size={32} round />
<span className="ml-2">Email </span>
</EmailShareButton>
</DropdownItem>
</DropdownMenu>
</Dropdown>

<Dropdown onClick={handleDropdownClick}>
<DropdownTrigger>
<Button
size="sm"
className="p-1 transition-all duration-300 ease-in-out bg-gray-300 hover:bg-gray-400 rounded-full shadow hover:shadow-lg"
>
<FaEllipsisV className="text-gray-800 pointer-events-none flex-shrink-0" />
</Button>
</DropdownTrigger>
<DropdownMenu
variant="faded"
aria-label="Dropdown menu with icons"
>
<DropdownItem
onClick={() => handleDownload(item.img, item.name)}
startContent={
<FaDownload className="text-default-500 pointer-events-none flex-shrink-0" />
}
>
Download
</DropdownItem>
<DropdownItem
key="logout"
className="text-danger"
color="danger"
startContent={<FaExclamationTriangle />}
>
Report
</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
</CardFooter>
</Card>
</Tooltip>
))}
</div>
</div>
Expand Down

0 comments on commit 86b564e

Please sign in to comment.