move all components to components dir

src/components/ShareLinksSplash.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Link, X, Clock, Share, ArrowRight, Lock } from "lucide-react"; // Replace with actual imports
+import { Card, CardContent } from "@app/components/ui/card";
+import { Button } from "@app/components/ui/button";
+import { useTranslations } from "next-intl";
+
+export const ShareableLinksSplash = () => {
+    const [isDismissed, setIsDismissed] = useState(false);
+
+    const key = "share-links-splash-dismissed";
+
+    useEffect(() => {
+        const dismissed = localStorage.getItem(key);
+        if (dismissed === "true") {
+            setIsDismissed(true);
+        }
+    }, []);
+
+    const handleDismiss = () => {
+        setIsDismissed(true);
+        localStorage.setItem(key, "true");
+    };
+
+    const t = useTranslations();
+
+    if (isDismissed) {
+        return null;
+    }
+
+    return (
+        <Card className="w-full mx-auto overflow-hidden mb-8 hidden md:block relative">
+            <button
+                onClick={handleDismiss}
+                className="absolute top-2 right-2 p-2"
+                aria-label={t('dismiss')}
+            >
+                <X className="w-5 h-5" />
+            </button>
+            <CardContent className="grid gap-6 p-6">
+                <div className="space-y-4">
+                    <h3 className="text-xl font-semibold flex items-center gap-2">
+                        <Link className="text-blue-500" />
+                        {t('share')}
+                    </h3>
+                    <p className="text-sm">
+                        {t('shareDescription2')}
+                    </p>
+                    <ul className="text-sm text-muted-foreground space-y-2">
+                        <li className="flex items-center gap-2">
+                            <Share className="text-green-500 w-4 h-4" />
+                            {t('shareEasyCreate')}
+                        </li>
+                        <li className="flex items-center gap-2">
+                            <Clock className="text-yellow-500 w-4 h-4" />
+                            {t('shareConfigurableExpirationDuration')}
+                        </li>
+                        <li className="flex items-center gap-2">
+                            <Lock className="text-red-500 w-4 h-4" />
+                            {t('shareSecureAndRevocable')}
+                        </li>
+                    </ul>
+                </div>
+            </CardContent>
+        </Card>
+    );
+};
+
+export default ShareableLinksSplash;