# Paste

id: vwxmq49
createdBy: 281113457833672706
content:
  "use client";

  import { useSession } from "next-auth/react";
  import { useRouter } from "next/navigation";
  import { useCallback, useEffect, useState } from "react";
  import Editor from "./paste-form/Editor";
  import SidebarPanel from "./paste-form/SidebarPanel";
  import AuthSection from "./paste-form/AuthSection";

  export default function PasteForm() {
    const router = useRouter();
    const { data: session } = useSession();

    const [title, setTitle] = useState("");
    const [content, setContent] = useState("");
    const [password, setPassword] = useState("");
    const [maxViews, setMaxViews] = useState("");
    const [isSaving, setIsSaving] = useState(false);
    const [advanced, setAdvanced] = useState(true);

    const handleSave = useCallback(async () => {
      if (!content.trim()) return;
      setIsSaving(true);

      const res = await fetch("/api/paste", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          title: title.trim() || null,
          content,
          password: password || null,
          maxViews: maxViews ? parseInt(maxViews, 10) : null,
          createdBy: session?.user?.id || null,
        }),
      });

      if (res.ok) {
        const data = await res.json();
        router.push(`/${data.id}`);
      }

      setIsSaving(false);
    }, [title, content, password, maxViews, session, router]);

    // Raccourci clavier Ctrl+S
    useEffect(() => {
      const onKeyDown = (e: KeyboardEvent) => {
        if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "s") {
          e.preventDefault();
          if (!isSaving && content.trim()) handleSave();
        }
      };
      window.addEventListener("keydown", onKeyDown);
      return () => window.removeEventListener("keydown", onKeyDown);
    }, [handleSave, isSaving, content]);

    return (
      <div className="w-screen h-screen bg-[#0e0f13] text-white relative">
        <Editor content={content} setContent={setContent} />
        <SidebarPanel
          title={title}
          setTitle={setTitle}
          maxViews={maxViews}
          setMaxViews={setMaxViews}
          password={password}
          setPassword={setPassword}
          content={content}
          isSaving={isSaving}
          handleSave={handleSave}
          advanced={advanced}
          setAdvanced={setAdvanced}
        />
        <AuthSection />
      </div>
    );
  }


id: qa65aao
createdBy: 281113457833672706
content:
  'use client';
  import { Eye, Lock, Settings } from 'lucide-react';
  import { useState } from 'react';

  export default function PasteOptionsPanel({
    password,
    setPassword,
    maxViews,
    setMaxViews,
    onCreate,
    disabled,
  }: {
    password: string;
    setPassword: (val: string) => void;
    maxViews: string;
    setMaxViews: (val: string) => void;
    onCreate: () => void;
    disabled: boolean;
  }) {
    const [open, setOpen] = useState(true);

    return (
      <aside className="w-80 rounded-2xl border border-[#1b1d2a] bg-[#0f111a]/60 shadow-xl p-5 flex flex-col justify-between text-sm backdrop-blur-md">
        <div>
          <div className="flex justify-between items-center mb-6">
            <h2 className="text-lg font-bold text-white">Alt<span className="text-blue-400">Bin</span></h2>
            <button
              className="bg-green-600 hover:bg-green-500 text-xs font-semibold px-3 py-1 rounded-full"
              onClick={onCreate}
              disabled={disabled}
            >
              + CREATE
            </button>
          </div>

          <button
            className="flex items-center gap-2 text-neutral-400 text-xs mb-3"
            onClick={() => setOpen(!open)}
          >
            <Settings size={14} />
            Advanced {open ? '▾' : '▸'}
          </button>

          {open && (
            <div className="space-y-6">
              <div className="space-y-2">
                <label className="flex items-center gap-2 text-neutral-400 text-xs uppercase tracking-wide">
                  <Eye size={14} /> Max Views
                </label>
                <input
                  type="number"
                  value={maxViews}
                  onChange={e => setMaxViews(e.target.value)}
                  placeholder="∞"
                  className="w-full bg-[#1a1d29] text-white p-2 rounded outline-none"
                />
                <p className="text-[11px] text-neutral-500">Delete after X views</p>
              </div>

              <div className="space-y-2">
                <label className="flex items-center gap-2 text-neutral-400 text-xs uppercase tracking-wide">
                  <Lock size={14} /> Password
                </label>
                <input
                  type="password"
                  value={password}
                  onChange={e => setPassword(e.target.value)}
                  placeholder="Optional password"
                  className="w-full bg-[#1a1d29] text-white p-2 rounded outline-none"
                />
                <p className="text-[11px] text-neutral-500">Require password to view</p>
              </div>
            </div>
          )}
        </div>

        <button
          disabled={disabled}
          onClick={onCreate}
          className={`mt-8 py-2 rounded-md text-sm tracking-wide font-medium flex items-center justify-center ${
            disabled
              ? 'bg-[#1a1d29] text-neutral-500 opacity-50 cursor-not-allowed'
              : 'bg-[#1a1d29] text-white hover:bg-neutral-800'
          }`}
        >
          <span className="text-lg">🔒</span> SAVE PASTE
        </button>
      </aside>
    );
  }


