mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-09 05:34:20 +02:00
Code Issues Packages Projects Releases Wiki Activity

style: radial gradient item card backgrounds

Browse Source
This commit is contained in:
Isaac
2024-06-19 02:17:57 +01:00
parent 4078809c13
commit 49d777842b
3 changed files with 24 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/features/marketplace/components/Elements/ItemCard/ItemCard.jsx
View File

@@ -4,7 +4,7 @@ import { useState } from 'react';
import placeholderIcon from 'assets/icons/marketplace-placeholder.png';
import { useTab } from 'components/Elements/MainModal/backend/TabContext';
import { useMarketData } from 'features/marketplace/api/MarketplaceDataContext';
import { MdOpenInNew } from "react-icons/md";
import { MdOpenInNew } from 'react-icons/md';
function ItemCard({ item, type, onCollection, isCurator, cardStyle }) {
const { getItemData, selectedItem, setSelectedItem } = useMarketData();
@@ -30,7 +30,11 @@ function ItemCard({ item, type, onCollection, isCurator, cardStyle }) {
switch (cardStyle) {
case 'list':
return (
<tr key={item.name} className="py-5 hover:bg-white/5 rounded-lg cursor-pointer" onClick={SelectItem}>
<tr
key={item.name}
className="py-5 hover:bg-white/5 rounded-lg cursor-pointer"
onClick={SelectItem}
>
<td className="flex flex-row items-center gap-10 py-3">
<img
className="w-10 h-10 rounded-lg"
@@ -46,29 +50,27 @@ function ItemCard({ item, type, onCollection, isCurator, cardStyle }) {
</td>
<td>{variables.getMessage('marketplace:' + getName(item.type)) || 'marketplace'}</td>
<td>{item.author}</td>
<td><MdOpenInNew /></td>
<td>
<MdOpenInNew />
</td>
</tr>
);
default:
return (
<motion.div
whileHover={{ y: -10 }}
transition={{ type: 'spring', stiffness: 150, damping: 15, mass: 0.5 }}
className="item"
// whileHover={{ y: -10 }}
// transition={{ type: 'spring', stiffness: 150, damping: 15, mass: 0.5 }}
// ease-in-out duration-100
className="item transition hover:-translate-y-2.5 motion-reduce:transition-none motion-reduce:hover:transform-none"
onClick={SelectItem}
key={item.name}
style={{
// alpha 66=0.4 33=0.2 00=0
backgroundImage: `radial-gradient(circle at center 25%, ${item.colour}66 0%, ${item.colour}33 10%, ${item.colour}00 75%)`,
// backgroundImage: `radial-gradient(circle at center 25%, ${item.colour}60, ${item.colour}0F)`,
// backgroundImage: `radial-gradient(circle at center 25%, ${item.colour}55, ${item.colour}0A)`,
}}
>
<img
className="item-back"
alt=""
draggable={false}
src={item.icon_url}
onError={(e) => {
e.target.onerror = null;
e.target.src = placeholderIcon;
}}
aria-hidden="true"
/>
<img
className="item-icon"
alt="icon"
@@ -90,7 +92,9 @@ function ItemCard({ item, type, onCollection, isCurator, cardStyle }) {
)}
{type === true && !onCollection ? (
<span className="card-type">{variables.getMessage('marketplace:' + getName(item.type))}</span>
<span className="card-type">
{variables.getMessage('marketplace:' + getName(item.type))}
</span>
) : null}
</div>
</motion.div>
@@ -98,4 +102,4 @@ function ItemCard({ item, type, onCollection, isCurator, cardStyle }) {
}
}
export { ItemCard as default, ItemCard };
export { ItemCard as default, ItemCard };