Cutlery/moodist
1
0
Fork 0
mirror of https://github.com/remvze/moodist.git synced 2025-11-04 19:43:04 -05:00
Code Issues Packages Projects Releases Wiki Activity

style: change sound counter

Browse Source
This commit is contained in:
MAZE 2023-12-28 22:44:53 +03:30
parent 37bad8149e
commit 00fc5f3a87
1 changed files with 19 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/hero.astro
View File

@ -1,5 +1,6 @@
--- ---
import { Balancer } from 'react-wrap-balancer'; import { Balancer } from 'react-wrap-balancer';
import { BsSoundwave } from 'react-icons/bs/index';
import { Container } from '@/components/container'; import { Container } from '@/components/container';
import { count as soundCount } from '@/lib/sounds'; import { count as soundCount } from '@/lib/sounds';
@ -27,7 +28,10 @@ const count = soundCount();
<Balancer>Ambient sounds for focus and calm.</Balancer> <Balancer>Ambient sounds for focus and calm.</Balancer>
</p> </p>
<p class="sounds">{count} Sounds</p> <p class="sounds">
<span class="icon"><BsSoundwave /></span>
<span>{count} Sounds</span>
</p>
</Container> </Container>
</div> </div>
@ -84,16 +88,29 @@ const count = soundCount();
& .sounds { & .sounds {
position: relative; position: relative;
display: flex; display: flex;
column-gap: 8px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: max-content; width: max-content;
padding: 6px 16px; height: 28px;
padding-right: 12px;
margin: 20px auto 0; margin: 20px auto 0;
font-size: var(--font-xsm); font-size: var(--font-xsm);
color: var(--color-foreground-subtle);
background-color: var(--color-neutral-100); background-color: var(--color-neutral-100);
border: 1px solid var(--color-neutral-200); border: 1px solid var(--color-neutral-200);
border-radius: 100px; border-radius: 100px;
& .icon {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 0 8px 0 12px;
color: var(--color-foreground);
border-right: 1px solid var(--color-neutral-200);
}
&::before { &::before {
position: absolute; position: absolute;
top: -1px; top: -1px;