feat: share button

app/src/pages/Dashboard/Dashboard.tsx

@@ -1,17 +1,79 @@
-import { useState } from 'react';
-import { Menu, Search, Share2, Plus, Layout, Edit } from "lucide-react";
+import React, { useState, useEffect } from 'react';
+import { Menu, Search, Share2, Plus, Layout, Edit, Copy, Check } from "lucide-react";
 import { Link, useLocation } from 'wouter';
 import styles from "./GalleryDashboard.module.css";
 import { UserButton } from "@/components/UserButton";
 import { NewGalleryButton } from '@/components/NewGalleryButton';
 import { useUser } from '@/stores/useUser';
 import { useMantineTheme } from '@mantine/core';
 import { LoadingScreen } from '@/components/Overlays/LoadingScreen';
+import Popup from '@/pages/Home/components/PopUp/Popup';
+import popupStyles from '@/pages/Home/components/PopUp/Popup.module.css';
 
-import { useEffect } from 'react';
+const ShareGalleryPopup = ({ trigger, setTrigger, gallerySlug }: { trigger: boolean, setTrigger: (value: boolean) => void, gallerySlug: string }) => {
+  const [copied, setCopied] = useState(false);
+  const shareLink = `https://metagallery.pages.dev/${gallerySlug}`;
+
+  const handleCopyLink = () => {
+    navigator.clipboard.writeText(shareLink).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  };
+
+  const resetPopup = () => {
+    setTrigger(false);
+    setCopied(false);
+  };
+
+  return (
+    <Popup trigger={trigger} setTrigger={resetPopup}>
+      <h3 className={popupStyles.title}>Compartir Galería</h3>
+      <p className={popupStyles.description}>
+        Comparte el enlace de tu galería con otros
+      </p>
+      <div className={popupStyles.formgroup} style={{ position: 'relative' }}>
+        <label className={popupStyles.label} htmlFor="galleryLink">
+          Enlace de la Galería
+        </label>
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <input
+            id="galleryLink"
+            className={popupStyles.forminput}
+            type="text"
+            value={shareLink}
+            readOnly
+            style={{ paddingRight: '40px', fontSize: '14px' }}
+          />
+          <button
+            onClick={handleCopyLink}
+            style={{
+              position: 'absolute',
+              right: '10px',
+              background: 'none',
+              border: 'none',
+              cursor: 'pointer',
+            }}
+          >
+            {copied ? (
+              <Check color="green" size={20} />
+            ) : (
+              <Copy size={20} />
+            )}
+          </button>
+        </div>
+      </div>
+      <button className={popupStyles.button} onClick={resetPopup}>
+        Cerrar
+      </button>
+    </Popup>
+  );
+};
 
 export const GalleryDashboard = () => {
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const [sharePopupOpen, setSharePopupOpen] = useState(false);
+  const [currentGallerySlug, setCurrentGallerySlug] = useState('');
   const theme = useMantineTheme();
   const [, setLocation] = useLocation();
   const { user, galleries, fetchGalleries, loading } = useUser();
@@ -24,28 +86,27 @@ export const GalleryDashboard = () => {
     }
   }, [user, fetchGalleries, setLocation]);
 
-  if (!user || loading) {
-    return <LoadingScreen />;
-  }
-
   const toggleSidebar = () => {
     setIsSidebarOpen(!isSidebarOpen);
   };
 
+  const handleShareGallery = (gallerySlug: string) => {
+    setCurrentGallerySlug(gallerySlug);
+    setSharePopupOpen(true);
+  };
+
+  if (!user || loading) {
+    return <LoadingScreen />;
+  }
+
   return (
     <div className={styles.container}>
-      {isSidebarOpen && (
-        <div
-          className={styles.overlay}
-          onClick={toggleSidebar}
-        />
-      )}
-
+      {isSidebarOpen && <div className={styles.overlay} onClick={toggleSidebar} />}
       <div className={`${styles.sidebar} ${isSidebarOpen ? styles.sidebarOpen : ''}`}>
         <div className={styles.sidebarContent}>
           <h2 className={styles.sidebarTitle}>Menú</h2>
           <nav className={styles.sidebarNav}>
-            <Link href='/new/edit' className={styles.sidebarButton}>
+            <Link href="/new/edit" className={styles.sidebarButton}>
               <Plus className={styles.sidebarIcon} />
               <span>Nueva Galería</span>
             </Link>
@@ -61,23 +122,19 @@ export const GalleryDashboard = () => {
         </div>
       </div>
 
-      <header className={styles.header} style={{
-        backgroundColor: theme.white,
-      }}>
+      <header className={styles.header} style={{ backgroundColor: theme.white }}>
         <div className={styles.headerContent}>
-          <button
-            onClick={toggleSidebar}
-            className={styles.menuButton}
-          >
+          <button onClick={toggleSidebar} className={styles.menuButton}>
             <Menu className={styles.menuIcon} />
             <span className={styles.srOnly}>Dashboard</span>
           </button>
-          <div style={{ display: 'flex', flexDirection: 'row', gap: '24px' }}>
+          <div style={{ display: 'flex', gap: '24px' }}>
             <NewGalleryButton />
             <UserButton />
           </div>
         </div>
       </header>
+
       <main className={styles.main}>
         <div className={styles.profileSection}>
           <h1 className={styles.profileName}>{user.displayname}</h1>
@@ -90,12 +147,8 @@ export const GalleryDashboard = () => {
             />
           </div>
           <div className={styles.filters}>
-            <button className={`${styles.filterButton} ${styles.active}`}>
-              Mis proyectos
-            </button>
-            <button className={styles.filterButton}>
-              Proyectos de la comunidad
-            </button>
+            <button className={`${styles.filterButton} ${styles.active}`}>Mis proyectos</button>
+            <button className={styles.filterButton}>Proyectos de la comunidad</button>
           </div>
         </div>
 
@@ -114,16 +167,21 @@ export const GalleryDashboard = () => {
                   <Link href={`/${gallery.slug}/edit`} className={styles.openButton}>
                     Abrir
                   </Link>
-                  <button className={styles.shareButton}>
-                    <Share2 className={styles.shareIcon} />
-                    Compartir
-                  </button>
+                  <button onClick={() => handleShareGallery(gallery.slug)} className={styles.shareButton}>Compartir</button>
                 </div>
               </div>
             </div>
           ))}
         </div>
       </main>
+
+      <ShareGalleryPopup
+        trigger={sharePopupOpen}
+        setTrigger={setSharePopupOpen}
+        gallerySlug={currentGallerySlug}
+      />
     </div>
   );
-}
+};
+
+export default GalleryDashboard;