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

Add tooltips #5

Merged
merged 2 commits into from
Jan 19, 2024
Merged

Add tooltips #5

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
bf69632
refactor: add tooltip and update style
kyziq Jan 19, 2024
4eb63e7
Merge branch 'main' into feature/issue-3/tooltip
kyziq Jan 19, 2024
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
8 changes: 1 addition & 7 deletions src/pages/MoreArt.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,13 +76,7 @@ const MoreArt = () => {
<div className="mt-10">
<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
>
<Tooltip key={index} content={item.name} placement="top" showArrow>
<Card
key={index}
shadow="sm"
Expand Down
44 changes: 25 additions & 19 deletions src/pages/TopPicks.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import { Image } from '@nextui-org/react';
import { Image, Tooltip } from '@nextui-org/react';
import { Link } from 'react-router-dom';
import { allLists } from '../data/list';
import { FaHeart } from 'react-icons/fa';

const Top = () => {
// Combine all lists and sort by 'likes' in descending order
const sortedList = Object.values(allLists)
.flat()
.sort((a, b) => b.likes - a.likes)
Expand All @@ -26,27 +25,34 @@ const Top = () => {
</p>
<div className="w-full grid grid-cols-1 sm:grid-cols-3 gap-4">
{sortedList.map((item) => (
<div key={item.id} className="flex flex-col items-center">
<Link to={`/art/${item.id}`}>
<Image
src={item.img}
alt={item.name}
className="w-full sm:w-48 sm:h-48 rounded-lg overflow-hidden bg-white shadow-md border border-gray-300 mb-2 object-cover"
/>
</Link>
<h3 className="font-semibold text-lg mb-2">{item.name}</h3>
<p className="flex items-center text-sm text-gray-600">
<span className="ml-1 inline-flex items-center text-red-500">
<FaHeart />
</span>
&nbsp;
{item.likes}
</p>
</div>
<Tooltip
key={item.id}
content="Click to discover the story and artist behind this masterpiece"
placement="top"
>
<div className="flex flex-col items-center">
<Link to={`/art/${item.id}`}>
<Image
src={item.img}
alt={item.name}
className="w-full sm:w-48 sm:h-48 rounded-lg overflow-hidden bg-white shadow-md border border-gray-300 mb-2 object-cover"
/>
</Link>
<h3 className="font-semibold text-lg mb-2">{item.name}</h3>
<p className="flex items-center text-sm text-gray-600">
<span className="ml-1 inline-flex items-center text-red-500">
<FaHeart />
</span>
&nbsp;
{item.likes}
</p>
</div>
</Tooltip>
))}
</div>
</div>
</div>
);
};

export default Top;