added filter button (basic)

Author: ashura-code

app/issues/page.tsx

@@ -1,7 +1,19 @@
+'use client';
 import React from 'react';
 import Collection from '@/comps/Collection';
 import Link from 'next/link';
 import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogFooter,
+  DialogClose,
+} from '@/components/ui/dialog';
+import organizations from '@/public/organizations.json';
 
 export default function Issues() {
   return (
@@ -11,12 +23,38 @@ export default function Issues() {
           Beginner-Friendly GSOC Issues
         </h1>
         <p className="max-w-[42rem] leading-normal text-muted-foreground sm:text-xl sm:leading-8">
-          Explore the list of beginner-friendly GSOC issues from various organizations. Get started on
-          your open source journey!
+          Explore the list of beginner-friendly GSOC issues from various
+          organizations. Get started on your open source journey!
         </p>
       </div>
+      <Filter />
       <Collection />
-      
     </div>
   );
 }
+
+function Filter() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Filters</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader className="dark:text-white">
+          <DialogTitle className="dark:text-white">Filters</DialogTitle>
+        </DialogHeader>
+
+        <div className="flex items-center flex-wrap space-x-2 gap-7">
+            <Button size="sm" className="px-3" onClick={() => setOpt('')}>
+                Remove filters
+              </Button>
+          {organizations.map((org) => (
+              <Button size="sm" className="px-3" onClick={() => setOpt('')}>
+                <Link href={`issues/${org.org}`}>{org.org}</Link>
+              </Button>
+          ))}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}