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; align-items: center;
justify-content: center; justify-content: center;
& a { & .icon {
color: inherit; display: flex;
text-decoration: none; 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 { &:hover {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
font-size: var(--font-md);
background: linear-gradient( 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); transform: scale(1.15);
border-radius: 50%;
transition: 0.2s;
&:hover {
background: linear-gradient(
var(--color-neutral-100),
var(--color-neutral-200)
);
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() { export default function CategoryIcons() {
const categories = useMemo(() => sounds.categories, []); const categories = useMemo(() => sounds.categories, []);
const goto = (id: string) => {
const category = document.getElementById(`category-${id}`);
category?.scrollIntoView();
};
return ( return (
<Container> <Container>
<div className={styles.wrapper}> <div className={styles.wrapper}>
@ -15,11 +20,18 @@ export default function CategoryIcons() {
<Tooltip.Provider delayDuration={0}> <Tooltip.Provider delayDuration={0}>
{categories.map(category => { {categories.map(category => {
return ( return (
<a href={`#category-${category.id}`} key={category.id}> <Tooltip
<Tooltip content={category.title} placement="bottom"> content={category.title}
<div className={styles.icon}>{category.icon}</div> key={category.id}
</Tooltip> placement="bottom"
</a> >
<button
className={styles.icon}
onClick={() => goto(category.id)}
>
{category.icon}
</button>
</Tooltip>
); );
})} })}
</Tooltip.Provider> </Tooltip.Provider>