share modal

Vizzuality · Feb 27, 2024 · a80f8e9 · a80f8e9
1 parent 02ffb6e
commit a80f8e9
Showing 1 changed file with 41 additions and 2 deletions.
diff --git a/client/src/containers/projects/detail/panel.tsx b/client/src/containers/projects/detail/panel.tsx
@@ -6,7 +6,17 @@ import { notFound, useParams, useSearchParams } from 'next/navigation';
 
 import { Tooltip } from '@radix-ui/react-tooltip';
 import { useAtom } from 'jotai';
-import { ArrowLeft, ChevronRight, Share as Download, Share2, X } from 'lucide-react';
+import {
+  ArrowLeft,
+  ChevronRight,
+  Facebook,
+  Twitter,
+  Linkedin,
+  Mail,
+  Share as Download,
+  Share2,
+  X,
+} from 'lucide-react';
 
 import { dashboardAtom } from '@/store';
 
@@ -15,6 +25,7 @@ import { PANEL_OVERVIEW_ITEMS } from '@/containers/projects/detail/constants';
 import { Button } from '@/components/ui/button';
 import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog';
 import { Drawer, DrawerClose, DrawerContent, DrawerTrigger } from '@/components/ui/drawer';
+import { Input } from '@/components/ui/input';
 import { TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 
 import ProjectDashboard from './dashboard';
@@ -81,7 +92,35 @@ export default function ProjectDetailPanel() {
                 </TooltipContent>
               </Tooltip>
             </DialogTrigger>
-            <DialogContent>Share content</DialogContent>
+            <DialogContent className="p-0">
+              <h3 className="border-b px-6 py-4 text-xl font-medium">Share</h3>
+              <div className="flex flex-col space-y-2 px-6 pb-10 pt-4">
+                <p className="text-base text-gray-500">Copy and paste link to share</p>
+                <div className="flex space-x-2">
+                  <Input></Input>
+                  <Button variant="primary" size="base">
+                    Copy
+                  </Button>
+                </div>
+                <div className="flex space-x-4 pt-6">
+                  <Button variant="primary" className="rounded-full">
+                    <Facebook className="fill-white text-white" size={16} />
+                  </Button>
+
+                  <Button variant="primary" className="rounded-full">
+                    <Twitter className="fill-white text-white" size={16} />
+                  </Button>
+
+                  <Button variant="primary" className="rounded-full">
+                    <Linkedin className="fill-white text-white" size={16} />
+                  </Button>
+
+                  <Button variant="primary" className="rounded-full">
+                    <Mail className="fill-white text-yellow-400" size={16} />
+                  </Button>
+                </div>
+              </div>
+            </DialogContent>
           </Dialog>
         </div>
       </div>