diff --git a/src/components/menu/item/item.module.css b/src/components/menu/item/item.module.css
index 7a1fb50..46d0fd3 100644
--- a/src/components/menu/item/item.module.css
+++ b/src/components/menu/item/item.module.css
@@ -1,11 +1,15 @@
.item {
- position: flex;
+ display: flex;
+ column-gap: 8px;
align-items: center;
+ justify-content: flex-start;
width: 100%;
- padding: 12px 8px;
+ padding: 16px 12px;
font-size: var(--font-sm);
font-weight: 500;
+ line-height: 1;
color: var(--color-foreground-subtle);
+ text-align: left;
cursor: pointer;
background-color: transparent;
border: 1px solid var(--color-neutral-200);
@@ -17,4 +21,8 @@
color: var(--color-foreground);
background-color: var(--color-neutral-200);
}
+
+ & .icon {
+ color: var(--color-foreground);
+ }
}
diff --git a/src/components/menu/item/item.tsx b/src/components/menu/item/item.tsx
index 3c8c3f6..4652c3d 100644
--- a/src/components/menu/item/item.tsx
+++ b/src/components/menu/item/item.tsx
@@ -1,14 +1,15 @@
import styles from './item.module.css';
interface ItemProps {
- children: React.ReactNode;
+ icon: React.ReactElement;
+ label: string;
onClick: () => void;
}
-export function Item({ children, onClick }: ItemProps) {
+export function Item({ icon, label, onClick }: ItemProps) {
return (
);
}
diff --git a/src/components/menu/items/share.tsx b/src/components/menu/items/share.tsx
index da5ab95..5cb062e 100644
--- a/src/components/menu/items/share.tsx
+++ b/src/components/menu/items/share.tsx
@@ -1,3 +1,5 @@
+import { IoShareSocialSharp } from 'react-icons/io5/index';
+
import { Item } from '../item';
interface ShareProps {
@@ -5,5 +7,7 @@ interface ShareProps {
}
export function Share({ open }: ShareProps) {
- return - Share Sounds
;
+ return (
+ } label="Share Sounds" onClick={open} />
+ );
}
diff --git a/src/components/menu/items/shuffle.tsx b/src/components/menu/items/shuffle.tsx
index dffd888..c676586 100644
--- a/src/components/menu/items/shuffle.tsx
+++ b/src/components/menu/items/shuffle.tsx
@@ -1,3 +1,5 @@
+import { BiShuffle } from 'react-icons/bi/index';
+
import { useSoundStore } from '@/store';
import { Item } from '../item';
@@ -5,5 +7,5 @@ import { Item } from '../item';
export function Shuffle() {
const shuffle = useSoundStore(state => state.shuffle);
- return - Shuffle Sounds
;
+ return } label="Shuffle Sounds" onClick={shuffle} />;
}