add ActionMenu component that holds sort, filter, and list view icons

devlarabar · Sep 15, 2023 · fc0db18 · fc0db18
1 parent f46e0b9
commit fc0db18
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 0 deletions.
diff --git a/client/components/ui/ActionMenu.jsx b/client/components/ui/ActionMenu.jsx
@@ -0,0 +1,14 @@
+import Link from 'next/link'
+import { FunnelIcon, ArrowsUpDownIcon, ListBulletIcon  } from '@heroicons/react/20/solid'
+
+const ActionMenu = () => {
+    return (
+        <section className="flex">
+            <ArrowsUpDownIcon className="action-icon" title="Sort By" />
+            <FunnelIcon className="action-icon" title="Filter By" />
+            <ListBulletIcon className="action-icon" title="List View" />
+        </section>
+    )
+}
+
+export default ActionMenu
diff --git a/client/styles/globals.css b/client/styles/globals.css
@@ -79,4 +79,8 @@ input:not([type="checkbox"]) {
 
 .navbar {
     @apply flex justify-between p-4;
+}
+
+.action-icon{
+    @apply w-7 h-7 mx-1 cursor-pointer;
 }