@adens/openwa 0.1.0

package/web/components/ContactList.js

@@ -0,0 +1,97 @@
+import { BrandLogo } from "@/components/BrandLogo";
+import { ConversationsSkeletonList } from "@/components/Skeletons";
+
+function formatTime(value) {
+  if (!value) {
+    return "";
+  }
+
+  return new Intl.DateTimeFormat("en-US", {
+    hour: "2-digit",
+    minute: "2-digit"
+  }).format(new Date(value));
+}
+
+function initials(name) {
+  return String(name || "?")
+    .split(" ")
+    .map((part) => part[0])
+    .join("")
+    .slice(0, 2)
+    .toUpperCase();
+}
+
+function Avatar({ src, label }) {
+  if (src) {
+    return <img src={src} alt={label} className="h-12 w-12 shrink-0 rounded-2xl object-cover" />;
+  }
+
+  return <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-[#2e2f2f] text-sm font-semibold text-white">{initials(label)}</div>;
+}
+
+export function ContactList({ chats, activeChatId, onSelectChat, currentUser, loading, query, onQueryChange }) {
+  const normalizedQuery = String(query || "").trim().toLowerCase();
+  const filteredChats = chats.filter((chat) =>
+    !normalizedQuery
+      || [chat.contact.displayName, chat.contact.lastMessagePreview, chat.title]
+        .filter(Boolean)
+        .some((value) => value.toLowerCase().includes(normalizedQuery))
+  );
+
+  return (
+    <aside className="flex h-full w-[360px] shrink-0 flex-col bg-[#161717]">
+      <div className="px-5 py-5">
+        <div className="flex items-center justify-center">
+          <div className="h-12 flex items-center">
+            <BrandLogo variant="long" alt="OpenWA" className="h-full" />
+          </div>
+        </div>
+
+        <div className="mt-4 rounded-[22px] bg-[#2e2f2f] px-3 py-2">
+          <input
+            className="w-full border-none bg-transparent text-sm text-white outline-none placeholder:text-white/30"
+            placeholder="Search conversation"
+            value={query}
+            onChange={(event) => onQueryChange(event.target.value)}
+          />
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto px-3 py-3">
+        {loading ? <ConversationsSkeletonList /> : null}
+        {!loading && filteredChats.length === 0 ? <p className="px-3 py-4 text-sm leading-6 text-white/40">No synced conversations yet. Connect your device to load chats.</p> : null}
+
+        <div className="space-y-2">
+          {filteredChats.map((chat) => (
+            <button
+              key={chat.id}
+              type="button"
+              className={`flex w-full items-start gap-3 rounded-[16px] px-4 py-3 text-left transition ${
+                chat.id === activeChatId
+                  ? "bg-[#2e2f2f]"
+                  : "bg-transparent hover:bg-white/[0.05]"
+              }`}
+              onClick={() => onSelectChat(chat.id)}
+            >
+              <Avatar src={chat.contact.avatarUrl} label={chat.contact.displayName} />
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center justify-between gap-3">
+                  <h3 className="truncate font-medium text-white">{chat.contact.displayName}</h3>
+                  <span className="shrink-0 text-[11px] text-white/35">{formatTime(chat.contact.lastMessageAt || chat.updatedAt)}</span>
+                </div>
+                <div className="mt-1 flex items-center justify-between gap-3">
+                  <p className="truncate text-sm text-white/42">{chat.contact.lastMessagePreview || "No messages yet"}</p>
+                  {chat.contact.unreadCount ? (
+                    <span className="flex h-5 min-w-5 items-center justify-center rounded-full bg-brand-500 px-1.5 text-[11px] font-bold text-[#10251a]">
+                      {chat.contact.unreadCount}
+                    </span>
+                  ) : null}
+                </div>
+              </div>
+            </button>
+          ))}
+        </div>
+      </div>
+    </aside>
+  );
+}

package/web/components/ContactsPanel.js

@@ -0,0 +1,90 @@
+import { MdClose } from "react-icons/md";
+
+function formatSubtitle(contact) {
+  if (contact.lastMessagePreview) {
+    return contact.lastMessagePreview;
+  }
+
+  return contact.externalId.replace(/@.+$/, "");
+}
+
+function initials(name) {
+  return String(name || "?")
+    .split(" ")
+    .map((part) => part[0])
+    .join("")
+    .slice(0, 2)
+    .toUpperCase();
+}
+
+function ContactAvatar({ src, label }) {
+  if (src) {
+    return <img src={src} alt={label} className="h-11 w-11 rounded-2xl object-cover" />;
+  }
+
+  return <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-[#2e2f2f] text-sm font-semibold text-white">{initials(label)}</div>;
+}
+
+export function ContactsPanel({ contacts, loading, open, query, onQueryChange, onStartChat, onClose, startingContactId }) {
+  const normalizedQuery = String(query || "").trim().toLowerCase();
+  const filteredContacts = contacts.filter((contact) =>
+    !normalizedQuery
+      || [contact.displayName, contact.externalId, contact.lastMessagePreview]
+        .filter(Boolean)
+        .some((value) => value.toLowerCase().includes(normalizedQuery))
+  );
+
+  return (
+    <aside className={`flex h-full shrink-0 overflow-hidden bg-[#161717] transition-[width,opacity] duration-300 ${open ? "w-[320px] opacity-100" : "w-0 opacity-0"}`}>
+      <div className={`flex h-full w-[320px] min-w-[320px] flex-col transition-transform duration-300 ${open ? "translate-x-0" : "translate-x-8"}`}>
+        <div className="px-5 py-5">
+          <div className="flex items-start justify-between gap-3">
+            <div>
+              <p className="text-[11px] uppercase tracking-[0.24em] text-white/35">Contacts</p>
+              <h2 className="mt-2 text-lg font-semibold text-white">Start new message</h2>
+            </div>
+            <button type="button" className="flex h-8 w-8 items-center justify-center rounded-full bg-[#2e2f2f] text-xs leading-none text-white/60 transition hover:bg-[#3a3b3b] hover:text-white" onClick={onClose} title="Close contacts" aria-label="Close contacts">
+              <MdClose className="w-4 h-4" />
+            </button>
+          </div>
+          <div className="mt-4 rounded-[22px] bg-[#2e2f2f] px-3 py-2">
+            <input
+              className="w-full border-none bg-transparent text-sm text-white outline-none placeholder:text-white/30"
+              placeholder="Search contacts"
+              value={query}
+              onChange={(event) => onQueryChange(event.target.value)}
+            />
+          </div>
+        </div>
+
+        <div className="flex-1 overflow-y-auto px-3 py-3">
+          {loading ? <p className="px-3 py-4 text-sm text-white/45">Loading contacts...</p> : null}
+          {!loading && filteredContacts.length === 0 ? <p className="px-3 py-4 text-sm leading-6 text-white/40">No synced contacts yet. Connect your device and wait for WhatsApp sync to complete.</p> : null}
+
+          <div className="space-y-2">
+            {filteredContacts.map((contact) => (
+              <button
+                key={contact.id}
+                type="button"
+                className="flex w-full items-center gap-3 rounded-[16px] bg-transparent px-3 py-3 text-left transition hover:bg-white/[0.05]"
+                onClick={() => onStartChat(contact.id)}
+              >
+                <ContactAvatar src={contact.avatarUrl} label={contact.displayName} />
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center justify-between gap-3">
+                    <h3 className="truncate text-sm font-medium text-white">{contact.displayName}</h3>
+                    {contact.hasChat ? <span className="rounded-full bg-[#144d37] px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.12em] text-white">Chat</span> : null}
+                  </div>
+                  <p className="mt-1 truncate text-xs text-white/40">{formatSubtitle(contact)}</p>
+                </div>
+                <div className="shrink-0 text-xs text-white/35">
+                  {startingContactId === contact.id ? "..." : "+"}
+                </div>
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+    </aside>
+  );
+}

package/web/components/EmojiPicker.js

@@ -0,0 +1,108 @@
+import { useEffect, useRef } from "react";
+import { MdClose } from "react-icons/md";
+
+const EMOJI_CATEGORIES = {
+  smileys: {
+    label: "😊",
+    emojis: ["😀", "😃", "😄", "😁", "😆", "😅", "🤣", "😂", "🙂", "🙃", "😉", "😊", "😇", "🥰", "😍", "🤩", "😘", "😗", "😚", "😙", "🥲", "😋", "😛", "😜", "🤪", "😌", "😔", "😑", "😐", "😐", "😑", "😒", "🙁", "☹️", "😲", "😞", "😖", "😢", "😭", "😤", "😠", "😡", "🤬", "😈", "👿", "💀", "☠️", "💩", "🤡", "👹", "👺", "👻", "👽", "👾", "🤖"]
+  },
+  gestures: {
+    label: "👋",
+    emojis: ["👋", "🤚", "🖐️", "✋", "🖖", "👌", "🤌", "🤏", "✌️", "🤞", "🫰", "🤟", "🤘", "🤙", "👍", "👎", "✊", "👊", "🤛", "🤜", "👏", "🙌", "👐", "🤲", "🤝", "🤜", "🤛", "🫱", "🫲", "💅", "👂", "👃", "🧠", "🫀", "🫁", "🦷", "🦴", "👀", "👁️", "👅", "👄"]
+  },
+  hearts: {
+    label: "❤️",
+    emojis: ["❤️", "🧡", "💛", "💚", "💙", "💜", "🖤", "🤍", "🤎", "💔", "💕", "💞", "💓", "💗", "💖", "💘", "💝", "💟", "💌", "💤", "💋"]
+  },
+  hand: {
+    label: "👌",
+    emojis: ["👌", "🤌", "🤏", "✌️", "🤞", "🫰", "🤟", "🤘", "🤙", "👍", "👎", "✊", "👊", "🤛", "🤜", "👏", "🙌", "👐", "🤲", "🤝"]
+  },
+  animals: {
+    label: "🐶",
+    emojis: ["🐶", "🐱", "🐭", "🐹", "🐰", "🦊", "🐻", "🐼", "🐨", "🐯", "🦁", "🐮", "🐷", "🐸", "🐵", "🙈", "🙉", "🙊", "🐒", "🐔", "🐧", "🐦", "🐤", "🐣", "🐥", "🦆", "🦅", "🦉", "🦇", "🐺", "🐗", "🐴", "🦄", "🐝", "🪱", "🐛", "🦋", "🐌", "🐞", "🐜", "🪰", "🦟"]
+  },
+  food: {
+    label: "🍎",
+    emojis: ["🍎", "🍊", "🍋", "🍌", "🍉", "🍇", "🍓", "🫐", "🍈", "🍒", "🍑", "🥭", "🍍", "🥥", "🥑", "🍆", "🍅", "🌶️", "🌽", "🥒", "🥬", "🥦", "🧄", "🧅", "🍄", "🥜", "🌰", "🍞", "🥐", "🥖", "🥨", "🥯", "🥞", "🧇", "🥚", "🍳", "🧈", "🥞", "🥓", "🥔", "🍟", "🍗", "🍖", "🌭", "🍔", "🍟", "🍕"]
+  },
+  travel: {
+    label: "🎡",
+    emojis: ["✈️", "🛫", "🛬", "🛩️", "💺", "🛰️", "🚁", "🚂", "🚃", "🚄", "🚅", "🚆", "🚇", "🚈", "🚉", "🚊", "🚝", "🚞", "🚋", "🚌", "🚍", "🚎", "🚐", "🚑", "🚒", "🚓", "🚔", "🚕", "🚖", "🚗", "🚘", "🚙", "🚚", "🚛", "🚜", "🏎️", "🏍️", "🛵", "🦯", "🦽", "🦼", "🛺", "🚲", "🛴", "🛹", "🛼", "🛞", "🚏", "⛽"]
+  },
+  activities: {
+    label: "⚽",
+    emojis: ["⚽", "⚾", "🥎", "🎾", "🏀", "🏐", "🏈", "🏉", "🥏", "🎳", "🏓", "🏸", "🏒", "🏑", "🥍", "🏏", "🥅", "⛳", "⛸️", "🎣", "🎽", "🎿", "⛷️", "🏂", "🪂", "🤼", "🤸", "⛹️", "🤺", "🤾", "🏌️", "🏇", "🧘", "🏄", "🏊", "🤽", "🚣", "🧗", "🚴", "🚵", "🤹", "🎪"]
+  }
+};
+
+export function EmojiPicker({ isOpen, onClose, onEmojiSelect, triggerRef }) {
+  const pickerRef = useRef(null);
+  const scrollRef = useRef(null);
+
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (pickerRef.current && !pickerRef.current.contains(event.target) && 
+          triggerRef?.current && !triggerRef.current.contains(event.target)) {
+        onClose();
+      }
+    }
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [isOpen, onClose, triggerRef]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div 
+      ref={pickerRef}
+      className="relative mb-2 w-80 rounded-2xl border border-white/10 bg-[#1a1b1b] shadow-[0_16px_32px_rgba(0,0,0,0.4)]"
+    >
+      <div className="flex h-12 items-center border-b border-white/10 px-3">
+        <h3 className="flex-1 text-sm font-semibold text-white">Emoji</h3>
+        <button
+          type="button"
+          onClick={onClose}
+          className="flex h-6 w-6 items-center justify-center rounded-full text-white/60 transition hover:bg-white/10 hover:text-white"
+          title="Close emoji picker"
+        >
+          <MdClose className="w-4 h-4" />
+        </button>
+      </div>
+
+      <div 
+        ref={scrollRef}
+        className="max-h-64 overflow-y-auto p-3"
+      >
+        <div className="space-y-3">
+          {Object.entries(EMOJI_CATEGORIES).map(([key, category]) => (
+            <div key={key}>
+              <div className="mb-2 text-xs font-semibold text-white/50">
+                {category.label}
+              </div>
+              <div className="grid grid-cols-8 gap-2">
+                {category.emojis.map((emoji, idx) => (
+                  <button
+                    key={`${key}-${idx}`}
+                    type="button"
+                    onClick={() => {
+                      onEmojiSelect(emoji);
+                      onClose();
+                    }}
+                    className="flex h-8 w-8 items-center justify-center rounded-lg text-lg transition hover:bg-white/10"
+                    title={emoji}
+                  >
+                    {emoji}
+                  </button>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/web/components/MediaPreviewModal.js

@@ -0,0 +1,146 @@
+import { useEffect, useState } from "react";
+import { MdClose, MdDownload, MdAdd, MdRemove } from "react-icons/md";
+
+export function MediaPreviewModal({ media, onClose }) {
+  const [zoom, setZoom] = useState(1);
+
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+      if (event.key === "+" || event.key === "=") {
+        event.preventDefault();
+        setZoom((current) => Math.min(current + 0.2, 3));
+      }
+      if (event.key === "-") {
+        event.preventDefault();
+        setZoom((current) => Math.max(current - 0.2, 0.5));
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [onClose]);
+
+  if (!media) {
+    return null;
+  }
+
+  const mediaUrl = media.mediaUrl || (media.relativePath ? `${getApiBaseUrl?.()}/` + media.relativePath : "");
+  const mimeType = media.mimeType || "";
+  const originalName = media.originalName || "media";
+  const isImage = media.isImage !== undefined ? media.isImage : mimeType.startsWith("image/") && mimeType !== "image/webp";
+
+  const handleDownload = async () => {
+    try {
+      const response = await fetch(mediaUrl);
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = originalName;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      window.URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error("Download failed:", error);
+      alert("Download failed: " + error.message);
+    }
+  };
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm"
+      onClick={onClose}
+    >
+      <div
+        className="relative max-h-[90vh] max-w-[90vw] rounded-2xl bg-black shadow-2xl"
+        onClick={(event) => event.stopPropagation()}
+      >
+        {/* Close button */}
+        <button
+          type="button"
+          onClick={onClose}
+          className="absolute right-6 top-6 z-10 rounded-full bg-black/60 w-10 h-10 flex items-center justify-center transition hover:bg-black/80 text-white"
+          title="Close (Esc)"
+        >
+          <MdClose className="w-5 h-5" />
+        </button>
+
+        {/* Download button */}
+        <button
+          type="button"
+          onClick={handleDownload}
+          className="absolute bottom-6 right-6 z-10 rounded-lg bg-black/60 px-4 py-2 text-sm font-medium text-white transition hover:bg-black/80 flex items-center gap-2"
+          title="Download"
+        >
+          <MdDownload className="w-4 h-4" />
+          Download
+        </button>
+
+        {/* Media content */}
+        <div className="flex items-center justify-center overflow-auto p-4">
+          {isImage ? (
+            <img
+              src={mediaUrl}
+              alt={originalName}
+              className="max-h-[calc(90vh-80px)] max-w-[calc(90vw-32px)] rounded-xl object-contain"
+              style={{
+                transform: `scale(${zoom})`,
+                transition: "transform 0.2s ease-in-out"
+              }}
+            />
+          ) : mimeType.startsWith("video/") ? (
+            <video
+              controls
+              autoPlay
+              className="max-h-[calc(90vh-80px)] max-w-[calc(90vw-32px)] rounded-xl"
+            >
+              <source src={mediaUrl} type={mimeType} />
+            </video>
+          ) : mimeType.startsWith("audio/") ? (
+            <audio controls autoPlay className="w-full max-w-[500px]">
+              <source src={mediaUrl} type={mimeType} />
+            </audio>
+          ) : null}
+        </div>
+
+        {/* Zoom controls (only for images) */}
+        {isImage && (
+          <div className="absolute bottom-6 left-6 flex items-center gap-2 rounded-lg bg-black/60 px-3 py-2">
+            <button
+              type="button"
+              onClick={() => setZoom((current) => Math.max(current - 0.2, 0.5))}
+              className="rounded p-1 transition hover:bg-black/80 text-white flex items-center justify-center"
+              title="Zoom out"
+            >
+              <MdRemove className="w-4 h-4" />
+            </button>
+            <span className="min-w-[40px] text-center text-sm text-white">
+              {Math.round(zoom * 100)}%
+            </span>
+            <button
+              type="button"
+              onClick={() => setZoom((current) => Math.min(current + 0.2, 3))}
+              className="rounded p-1 transition hover:bg-black/80 text-white flex items-center justify-center"
+              title="Zoom in"
+            >
+              <MdAdd className="w-4 h-4" />
+            </button>
+            <div className="h-4 w-px bg-white/20" />
+            <button
+              type="button"
+              onClick={() => setZoom(1)}
+              className="px-2 py-1 text-xs transition hover:bg-black/80 text-white"
+              title="Reset zoom"
+            >
+              Reset
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/web/components/MessageActionMenu.js

@@ -0,0 +1,155 @@
+import { useEffect, useRef, useState } from "react";
+import { MdReply, MdDelete, MdShare } from "react-icons/md";
+
+export function MessageActionMenu({ 
+  isOpen, 
+  onClose, 
+  message, 
+  onReply, 
+  onDelete, 
+  onForward,
+  isOutbound,
+  triggerRef
+}) {
+  const menuRef = useRef(null);
+  const [position, setPosition] = useState({ top: 0, left: 0, transformOrigin: "top-right" });
+
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (menuRef.current && !menuRef.current.contains(event.target) && 
+          triggerRef?.current && !triggerRef.current.contains(event.target)) {
+        onClose();
+      }
+    }
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [isOpen, onClose, triggerRef]);
+
+  useEffect(() => {
+    if (!isOpen || !triggerRef?.current || !menuRef?.current) return;
+
+    const calculatePosition = () => {
+      const trigger = triggerRef.current;
+      const menu = menuRef.current;
+      const triggerRect = trigger.getBoundingClientRect();
+      const menuRect = menu.getBoundingClientRect();
+      
+      // Get viewport dimensions
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      const menuWidth = 224; // w-56 = 14rem = 224px
+      const menuHeight = menuRect.height || 180;
+      const gap = 8;
+
+      let top = 0;
+      let left = 0;
+      let transformOrigin = "top-right";
+
+      // Calculate horizontal position
+      const spaceRight = viewportWidth - triggerRect.right;
+      const spaceLeft = triggerRect.left;
+
+      if (spaceRight >= menuWidth + gap) {
+        // Show on the right
+        left = triggerRect.width + gap;
+        transformOrigin = "top-left";
+      } else if (spaceLeft >= menuWidth + gap) {
+        // Show on the left
+        left = -(menuWidth + gap);
+        transformOrigin = "top-right";
+      } else {
+        // Not enough space, show to the right anyway but may overlap
+        left = triggerRect.width + gap;
+        transformOrigin = "top-left";
+      }
+
+      // Calculate vertical position
+      const spaceBottom = viewportHeight - triggerRect.bottom;
+      const spaceTop = triggerRect.top;
+
+      if (spaceBottom >= menuHeight + gap) {
+        // Show below the button
+        top = triggerRect.height + gap;
+      } else if (spaceTop >= menuHeight + gap) {
+        // Show above the button
+        top = -(menuHeight + gap);
+      } else {
+        // Not enough space, show below anyway
+        top = triggerRect.height + gap;
+      }
+
+      setPosition({ top, left, transformOrigin });
+    };
+
+    calculatePosition();
+    window.addEventListener("resize", calculatePosition);
+    return () => window.removeEventListener("resize", calculatePosition);
+  }, [isOpen, triggerRef]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div 
+      ref={menuRef}
+      style={{
+        position: "absolute",
+        top: `${position.top}px`,
+        left: `${position.left}px`,
+        transformOrigin: position.transformOrigin,
+      }}
+      className="z-50 w-56 rounded-2xl border border-white/10 bg-[#1a1b1b] shadow-[0_16px_32px_rgba(0,0,0,0.4)]"
+    >
+      <button
+        type="button"
+        onClick={onClose}
+        className="flex w-full items-center gap-3 border-b border-white/10 px-4 py-3 text-sm font-medium text-white transition hover:bg-white/5"
+      >
+        <span>←</span>
+        <span>Back</span>
+      </button>
+
+      <div className="space-y-0">
+        <button
+          type="button"
+          onClick={() => {
+            onReply();
+            onClose();
+          }}
+          className="flex w-full items-center gap-3 px-4 py-3 text-sm text-white/80 transition hover:bg-white/5 hover:text-white"
+        >
+          <span><MdReply className="w-4 h-4" /></span>
+          <span>Reply</span>
+        </button>
+
+        {isOutbound && (
+          <button
+            type="button"
+            onClick={() => {
+              onDelete();
+              onClose();
+            }}
+            className="flex w-full items-center gap-3 px-4 py-3 text-sm text-white/80 transition hover:bg-red-500/10 hover:text-red-300"
+          >
+            <span><MdDelete className="w-4 h-4" /></span>
+            <span>Delete</span>
+          </button>
+        )}
+
+        <button
+          type="button"
+          onClick={() => {
+            onForward();
+            onClose();
+          }}
+          className="flex w-full items-center gap-3 px-4 py-3 text-sm text-white/80 transition hover:bg-white/5 hover:text-white"
+        >
+          <span><MdShare className="w-4 h-4" /></span>
+          <span>Forward</span>
+        </button>
+      </div>
+    </div>
+  );
+}