hax/moodist
1
0
Fork 0
mirror of https://github.com/remvze/moodist.git synced 2025-12-17 00:44:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: turn links into buttons

Browse source
This commit is contained in:
MAZE 2025-11-25 00:26:47 +03:30
parent b921629ee3
commit d0160763ee
2 changed files with 37 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
src/components/categories/category-icons/category-icons.module.css
View file

@ -18,32 +18,29 @@
align-items: center;
justify-content: center;
& a {
color: inherit;
text-decoration: none;
& .icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
font-size: var(--font-md);
color: var(--color-foreground);
cursor: pointer;
background: linear-gradient(
var(--color-neutral-50),
var(--color-neutral-100)
);
border: 1px solid var(--color-neutral-300);
border-radius: 50%;
transition: 0.2s;
& .icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
font-size: var(--font-md);
&:hover {
background: linear-gradient(
var(--color-neutral-50),
var(--color-neutral-100)
var(--color-neutral-100),
var(--color-neutral-200)
);
border: 1px solid var(--color-neutral-300);
border-radius: 50%;
transition: 0.2s;
&:hover {
background: linear-gradient(
var(--color-neutral-100),
var(--color-neutral-200)
);
transform: scale(1.15);
}
transform: scale(1.15);
}
}
}

22
src/components/categories/category-icons/category-icons.tsx
View file

@ -7,6 +7,11 @@ import { Tooltip } from '@/components/tooltip';
export default function CategoryIcons() {
const categories = useMemo(() => sounds.categories, []);
const goto = (id: string) => {
const category = document.getElementById(`category-${id}`);
category?.scrollIntoView();
};
return (
<Container>
<div className={styles.wrapper}>
@ -15,11 +20,18 @@ export default function CategoryIcons() {
<Tooltip.Provider delayDuration={0}>
{categories.map(category => {
return (
<a href={`#category-${category.id}`} key={category.id}>
<Tooltip content={category.title} placement="bottom">
<div className={styles.icon}>{category.icon}</div>
</Tooltip>
</a>
<Tooltip
content={category.title}
key={category.id}
placement="bottom"
>
<button
className={styles.icon}
onClick={() => goto(category.id)}
>
{category.icon}
</button>
</Tooltip>
);
})}
</Tooltip.Provider>