wip

apps/dashboard/src/components/amount-range.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { Slider } from "@midday/ui/slider";
+
+export default function AmountRange() {
+  return (
+    <div className="bg-background text-popover-foreground shadow-lg w-[250px] p-4">
+      <Slider defaultValue={[50]} max={100} step={1} />
+    </div>
+  );
+}

apps/dashboard/src/components/transactions-search-filter.tsx

@@ -27,6 +27,7 @@ import {
 } from "nuqs";
 import { useRef, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
+import AmountRange from "./amount-range";
 import { FilterList } from "./filter-list";
 import { SelectCategory } from "./select-category";
 
@@ -313,6 +314,24 @@ export function TransactionsSearchFilter({
           </DropdownMenuSub>
         </DropdownMenuGroup>
 
+        <DropdownMenuGroup>
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger>
+              <Icons.Amount className="mr-2 size-4" />
+              <span>Amount</span>
+            </DropdownMenuSubTrigger>
+            <DropdownMenuPortal>
+              <DropdownMenuSubContent
+                sideOffset={14}
+                alignOffset={-4}
+                className="p-0"
+              >
+                <AmountRange />
+              </DropdownMenuSubContent>
+            </DropdownMenuPortal>
+          </DropdownMenuSub>
+        </DropdownMenuGroup>
+
         <DropdownMenuGroup>
           <DropdownMenuSub>
             <DropdownMenuSubTrigger>

packages/ui/package.json

@@ -34,6 +34,7 @@
     "./button": "./src/components/button.tsx",
     "./calendar": "./src/components/calendar.tsx",
     "./card": "./src/components/card.tsx",
+    "./slider": "./src/components/slider.tsx",
     "./carousel": "./src/components/carousel.tsx",
     "./checkbox": "./src/components/checkbox.tsx",
     "./collapsible": "./src/components/collapsible.tsx",
@@ -99,6 +100,7 @@
     "@radix-ui/react-scroll-area": "^1.2.0",
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slider": "^1.2.1",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.1",

packages/ui/src/components/icons.tsx

@@ -70,6 +70,7 @@ import {
   MdOutlineDownload,
   MdOutlineEditNote,
   MdOutlineEmail,
+  MdOutlineEqualizer,
   MdOutlineExitToApp,
   MdOutlineFace,
   MdOutlineFactCheck,
@@ -578,6 +579,7 @@ export const Icons = {
   Fence: MdFence,
   Refresh: MdRefresh,
   Currency: MdAttachMoney,
+  Amount: MdOutlineEqualizer,
   Inventory2: MdInventory2,
   Person: MdPerson,
   Peolple: MdPeople,

packages/ui/src/components/slider.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import * as React from "react";
+import { cn } from "../utils";
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className,
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };