Update code

2025-08-20 15:16:00 +02:00
parent 0c1a0d74d7
commit f6170fa581
9 changed files with 341 additions and 261 deletions
@@ -0,0 +1,38 @@
+'use client';
+
+import Prism from 'prismjs';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-python';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
+import 'prismjs/plugins/line-numbers/prism-line-numbers.js';
+import 'prismjs/themes/prism-tomorrow.css';
+import { useEffect, useRef } from 'react';
+
+export default function CodeViewer({
+  paste,
+  language,
+}: {
+  paste: any;
+  language: string;
+}) {
+  const codeRef = useRef<HTMLPreElement | null>(null);
+
+  useEffect(() => {
+    if (paste?.content) {
+      Prism.highlightAll();
+    }
+  }, [paste, language]);
+
+  return (
+    <div className="flex-1 h-full font-mono text-sm">
+      <pre ref={codeRef} className="h-full overflow-auto pt-6 pb-6 px-6 line-numbers">
+        <code className={`${language} whitespace-pre-wrap break-words`}>
+          {paste.content}
+        </code>
+      </pre>
+    </div>
+  );
+}
@@ -0,0 +1,62 @@
+export default function LoadingPaste() {
+  return (
+    <div className="relative w-screen h-screen bg-[#0e0f13] text-white flex overflow-hidden">
+      <div className="flex-1 h-full font-mono text-sm">
+        <div className="h-full overflow-auto pt-6 pb-6 px-6">
+          <div className="mb-4 flex items-center gap-2">
+            <div className="h-5 w-5 rounded-full border-2 border-white/30 border-t-transparent animate-spin" />
+            <span className="text-white/70 text-sm">Loading paste…</span>
+          </div>
+          <div className="space-y-2">
+            {Array.from({ length: 28 }).map((_, i) => (
+              <div
+                key={i}
+                className={`h-3 rounded bg-white/10 animate-pulse ${
+                  i % 3 === 0 ? 'w-5/6' : i % 3 === 1 ? 'w-11/12' : 'w-3/4'
+                }`}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div className="absolute top-4 right-4 w-[300px] rounded-2xl p-5 text-sm backdrop-blur-xl shadow-2xl bg-[linear-gradient(to_bottom_right,#1a2035,#101522)] ring-1 ring-white/10 mr-4">
+        <div className="mb-4">
+          <div className="flex items-center justify-between">
+            <div className="h-6 w-24 bg-white/10 rounded animate-pulse" />
+            <div className="h-7 w-20 rounded-full bg-green-600/60 animate-pulse" />
+          </div>
+          <div className="h-4 w-40 bg-white/10 rounded mt-2 animate-pulse" />
+        </div>
+
+        <div className="grid grid-cols-2 gap-3 text-neutral-300">
+          {[...Array(2)].map((_, i) => (
+            <div
+              key={i}
+              className="flex items-center gap-2 rounded-lg px-3 py-2 bg-[#151b2e] ring-1 ring-white/15"
+            >
+              <div className="h-4 w-4 rounded bg-white/10 animate-pulse" />
+              <div className="flex-1 space-y-1">
+                <div className="h-3 w-10 bg-white/10 rounded animate-pulse" />
+                <div className="h-3 w-12 bg-white/20 rounded animate-pulse" />
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="h-px bg-white/10 my-4" />
+
+        <div className="grid grid-cols-4 gap-2">
+          {[...Array(4)].map((_, i) => (
+            <div
+              key={i}
+              className="h-9 rounded-lg bg-[#151b2e] ring-1 ring-white/10 animate-pulse"
+            />
+          ))}
+        </div>
+
+        <div className="mt-3 h-3 w-16 mx-auto bg-green-400/50 rounded animate-pulse" />
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,39 @@
+export default function PasswordForm({
+  onSubmit,
+  error,
+}: {
+  onSubmit: (pwd: string) => void;
+  error?: string;
+}) {
+  return (
+    <div className="h-screen w-screen bg-[#0e0f13] flex items-center justify-center text-white">
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          const pwd = (e.currentTarget as any).password.value;
+          onSubmit(pwd);
+        }}
+        className="w-full max-w-sm rounded-2xl p-6 space-y-4 backdrop-blur-xl shadow-2xl bg-[linear-gradient(to_bottom_right,rgba(20,24,38,0.9),rgba(14,16,24,0.9))] ring-1 ring-white/10"
+      >
+        <h2 className="text-xl font-bold">
+          <span className="text-red-400">🔒 Protected Paste</span>
+        </h2>
+        {error && <p className="text-red-500 text-sm">{error}</p>}
+
+        <input
+          name="password"
+          type="password"
+          placeholder="Enter password"
+          className="w-full rounded-xl bg-[#0f1320]/60 text-white placeholder:text-neutral-500 px-3 py-2 outline-none ring-1 ring-white/10 focus:ring-2 focus:ring-blue-500/50"
+        />
+
+        <button
+          type="submit"
+          className="w-full inline-flex items-center justify-center gap-2 rounded-xl py-2 text-sm font-medium bg-gradient-to-b from-[#1b2135] to-[#141a2a] text-white ring-1 ring-white/10 hover:from-[#232a41] hover:to-[#161d2f] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400/60"
+        >
+          View Paste
+        </button>
+      </form>
+    </div>
+  );
+}
@@ -0,0 +1,107 @@
+'use client';
+
+import { CalendarDays, Copy, Download, Eye, FileText, Plus } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export default function PasteSidebar({ paste, id }: { paste: any; id: string }) {
+  const [copied, setCopied] = useState(false);
+  const router = useRouter();
+
+  return (
+    <div className="absolute top-4 right-4 w-[300px] rounded-2xl p-5 text-sm backdrop-blur-xl shadow-2xl bg-[linear-gradient(to_bottom_right,#1a2035,#101522)] ring-1 ring-white/10 mr-4">
+      <div className="mb-4">
+        <div className="flex items-center justify-between">
+          <h2 className="text-lg font-bold tracking-tight">
+            Alt<span className="text-blue-400">Bin</span>
+          </h2>
+          <button
+            onClick={() => router.push("/")}
+            className="cursor-pointer inline-flex items-center gap-1 rounded-full px-3 py-1 text-xs font-semibold bg-green-600 text-white shadow-sm hover:bg-green-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-green-400/60"
+          >
+            <Plus size={14} /> CREATE
+          </button>
+        </div>
+        {paste.title && (
+          <h1 className="text-sm font-semibold text-blue-300 truncate mt-1" title={paste.title}>
+            {paste.title}
+          </h1>
+        )}
+      </div>
+
+      {/* Infos */}
+      <div className="grid grid-cols-2 gap-3 text-neutral-300">
+        <div className="flex items-center gap-2 rounded-lg px-3 py-2 bg-[#151b2e] ring-1 ring-white/15">
+          <Eye size={16} />
+          <div className="leading-tight">
+            <div className="text-xs text-neutral-400">Views</div>
+            <div className="text-sm font-medium text-white">{paste.views}</div>
+          </div>
+        </div>
+        <div className="flex items-center gap-2 rounded-lg px-3 py-2 bg-[#151b2e] ring-1 ring-white/15">
+          <CalendarDays size={16} />
+          <div className="leading-tight">
+            <div className="text-xs text-neutral-400">Created</div>
+            <div className="text-sm font-medium text-white">
+              {new Date(paste.createdAt).toLocaleDateString()}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="h-px bg-white/10 my-4" />
+
+      {/* Actions */}
+      <div className="grid grid-cols-4 gap-2">
+        <button
+          onClick={async () => {
+            await navigator.clipboard.writeText(paste.content);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 1200);
+          }}
+          title="Copy"
+          className="cursor-pointer inline-flex items-center justify-center rounded-lg p-2 bg-[#151b2e] ring-1 ring-white/10 hover:bg-[#1e253d] hover:ring-blue-400/30"
+        >
+          <Copy size={18} />
+        </button>
+        <button
+          onClick={() => window.open(`/raw/${id}`, "_blank")}
+          title="Raw"
+          className="cursor-pointer inline-flex items-center justify-center rounded-lg p-2 bg-[#151b2e] ring-1 ring-white/10 hover:bg-[#1e253d] hover:ring-blue-400/30"
+        >
+          <FileText size={18} />
+        </button>
+        <button
+          onClick={() => {
+            const blob = new Blob([paste.content], { type: "text/plain" });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement("a");
+            a.href = url;
+            a.download = `${id}.txt`;
+            a.click();
+            URL.revokeObjectURL(url);
+          }}
+          title="Download"
+          className="cursor-pointer inline-flex items-center justify-center rounded-lg p-2 bg-[#151b2e] ring-1 ring-white/10 hover:bg-[#1e253d] hover:ring-blue-400/30"
+        >
+          <Download size={18} />
+        </button>
+        <button
+          onClick={() => router.push("/")}
+          title="New paste"
+          className="cursor-pointer inline-flex items-center justify-center rounded-lg p-2 bg-[#151b2e] ring-1 ring-white/10 hover:bg-[#1e253d] hover:ring-blue-400/30"
+        >
+          <Plus size={18} />
+        </button>
+      </div>
+
+      <div
+        className={`mt-3 text-center text-xs transition-opacity ${
+          copied ? "opacity-100 text-green-400" : "opacity-0"
+        }`}
+      >
+        Copied!
+      </div>
+    </div>
+  );
+}