From 4400648205ea3f6172ed818b5e952556368ca913 Mon Sep 17 00:00:00 2001 From: Yash Date: Tue, 2 Apr 2024 10:51:44 +0000 Subject: [PATCH] filter combo box --- apps/web/package.json | 1 + apps/web/pnpm-lock.yaml | 40 +++++ apps/web/src/components/Main.tsx | 28 ++-- .../src/components/Sidebar/FilterCombobox.tsx | 103 ++++++++++++ apps/web/src/components/Sidebar/index.tsx | 10 +- apps/web/src/components/ui/command.tsx | 155 ++++++++++++++++++ apps/web/src/components/ui/dialog.tsx | 122 ++++++++++++++ 7 files changed, 440 insertions(+), 19 deletions(-) create mode 100644 apps/web/src/components/Sidebar/FilterCombobox.tsx create mode 100644 apps/web/src/components/ui/command.tsx create mode 100644 apps/web/src/components/ui/dialog.tsx diff --git a/apps/web/package.json b/apps/web/package.json index f0901e92..46e4f492 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -21,6 +21,7 @@ "@radix-ui/react-slot": "^1.0.2", "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", + "cmdk": "^1.0.0", "framer-motion": "^11.0.24", "lucide-react": "^0.338.0", "next": "14.1.0", diff --git a/apps/web/pnpm-lock.yaml b/apps/web/pnpm-lock.yaml index 583b6b2a..a7f7d820 100644 --- a/apps/web/pnpm-lock.yaml +++ b/apps/web/pnpm-lock.yaml @@ -26,6 +26,12 @@ dependencies: clsx: specifier: ^2.1.0 version: 2.1.0 + cmdk: + specifier: ^1.0.0 + version: 1.0.0(@types/react-dom@18.2.23)(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0) + framer-motion: + specifier: ^11.0.24 + version: 11.0.24(react-dom@18.2.0)(react@18.2.0) lucide-react: specifier: ^0.338.0 version: 0.338.0(react@18.2.0) @@ -1982,6 +1988,21 @@ packages: engines: {node: '>=6'} dev: false + /cmdk@1.0.0(@types/react-dom@18.2.23)(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-gDzVf0a09TvoJ5jnuPvygTB77+XdOSwEmJ88L6XPFPlv7T3RxbP9jgenfylrAMD0+Le1aO0nVjQUzl2g+vjz5Q==} + peerDependencies: + react: ^18.0.0 + react-dom: ^18.0.0 + dependencies: + '@radix-ui/react-dialog': 1.0.5(@types/react-dom@18.2.23)(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.23)(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + transitivePeerDependencies: + - '@types/react' + - '@types/react-dom' + dev: false + /code-block-writer@10.1.1: resolution: {integrity: sha512-67ueh2IRGst/51p0n6FvPrnRjAGHY5F8xdjkgrYE7DDzpJe6qA07RYQ9VcoUeo5ATOjSOiWpSL3SWBRRbempMw==} dev: true @@ -3243,6 +3264,25 @@ packages: resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==} dev: true + /framer-motion@11.0.24(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-l2iM8NR53qtcujgAqYvGPJJGModPNWEVUaATRDLfnaLvUoFpImovBm0AHalSSsY8tW6knP8mfJTW4WYGbnAe4w==} + peerDependencies: + '@emotion/is-prop-valid': '*' + react: ^18.0.0 + react-dom: ^18.0.0 + peerDependenciesMeta: + '@emotion/is-prop-valid': + optional: true + react: + optional: true + react-dom: + optional: true + dependencies: + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + tslib: 2.6.2 + dev: false + /fs-extra@11.1.0: resolution: {integrity: sha512-0rcTq621PD5jM/e0a3EJoGC/1TC5ZBCERW82LQuwfGnCa1V8w7dpYH1yNu+SLb6E5dkeCBzKEyLGlFrnr+dUyw==} engines: {node: '>=14.14'} diff --git a/apps/web/src/components/Main.tsx b/apps/web/src/components/Main.tsx index f5f70bc8..5ec10364 100644 --- a/apps/web/src/components/Main.tsx +++ b/apps/web/src/components/Main.tsx @@ -1,8 +1,12 @@ -import { SpaceIcon } from "@/assets/Memories"; +"use client"; +import { useState } from "react"; +import { FilterCombobox } from "./Sidebar/FilterCombobox"; import { Textarea2 } from "./ui/textarea"; -import { ArrowRight, ChevronDown, GlobeIcon } from "lucide-react"; +import { ArrowRight } from "lucide-react"; export default function Main() { + const [value, setValue] = useState(""); + return (
setValue(e.target.value), }} > -
- - -
diff --git a/apps/web/src/components/Sidebar/FilterCombobox.tsx b/apps/web/src/components/Sidebar/FilterCombobox.tsx new file mode 100644 index 00000000..50e885e8 --- /dev/null +++ b/apps/web/src/components/Sidebar/FilterCombobox.tsx @@ -0,0 +1,103 @@ +"use client"; + +import * as React from "react"; +import { Check, ChevronsUpDown } from "lucide-react"; + +import { cn } from "@/lib/utils"; +import { Button } from "@/components/ui/button"; +import { + Command, + CommandEmpty, + CommandGroup, + CommandInput, + CommandItem, + CommandList, +} from "@/components/ui/command"; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/components/ui/popover"; +import { SpaceIcon } from "@/assets/Memories"; + +const spaces = [ + { + value: "1", + label: "Cool Tech", + }, + { + value: "2", + label: "Cool Courses", + }, + { + value: "3", + label: "Cool Libraries", + }, +]; + +export function FilterCombobox() { + const [open, setOpen] = React.useState(false); + const [values, setValues] = React.useState([]); + + return ( + + + + + + + spaces + .find((s) => s.value === val) + ?.label.toLowerCase() + .includes(search.toLowerCase().trim()) + ? 1 + : 0 + } + > + + + Nothing found + + {spaces.map((space) => ( + { + console.log(val, "selected"); + setValues((prev) => + prev.includes(val) + ? prev.filter((v) => v !== val) + : [...prev, val], + ); + }} + > + + {space.label} + {values.includes(space.value)} + + + ))} + + + + + + ); +} diff --git a/apps/web/src/components/Sidebar/index.tsx b/apps/web/src/components/Sidebar/index.tsx index 49146140..dda95907 100644 --- a/apps/web/src/components/Sidebar/index.tsx +++ b/apps/web/src/components/Sidebar/index.tsx @@ -35,7 +35,7 @@ export default async function Sidebar() { // data-state-on="true" className="on:opacity-100 on:bg-rgray-4 focus-visible:ring-rgray-7 flex w-full flex-col items-center justify-center rounded-md px-3 py-3 opacity-80 ring-2 ring-transparent transition hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none" > - + Memories