register , login model complated. plagiraism component complated(essential part of main page is complated )

2026-03-30 20:25:30 +05:00
parent 8906cf6634
commit 8b93952a06
29 changed files with 1475 additions and 205 deletions
--- a/src/widgets/fileUpload/ui/Plagiraismcheckform.tsx
+++ b/src/widgets/fileUpload/ui/Plagiraismcheckform.tsx
@@ -0,0 +1,163 @@
+'use client';
+import React from 'react';
+import {
+  FieldWrapper,
+  TextInput,
+  ReadonlyField,
+  FileUploadField,
+  CertificateCheckbox,
+  SubmitButton,
+  StatusBanner,
+} from './Plagiraismui';
+import { usePlagiarismForm } from '../lib/usePlagiraism';
+
+// ─── UserIcon (inline) ───────────────────────────────────────────────────────
+
+function UserIcon() {
+  return (
+    <svg
+      className="w-4 h-4"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={1.5}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"
+      />
+    </svg>
+  );
+}
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+export function PlagiarismCheckForm() {
+  const {
+    form,
+    errors,
+    submission,
+    senderFullName,
+    isLoading,
+    setTopic,
+    setFile,
+    toggleCertificate,
+    handleSubmit,
+    resetSubmission,
+  } = usePlagiarismForm();
+
+  return (
+    <div className=" bg-[#f4f5ffec] flex items-center justify-center p-4 font-['DM_Sans',sans-serif]">
+      <div className="w-full max-w-4xl">
+        {/* ── Header ────────────────────────────────────────────────────── */}
+        <div className="mb-8">
+          <div className="inline-flex items-center gap-2 bg-blue-100 text-blue-700 text-xs font-bold uppercase tracking-widest px-3 py-1.5 rounded-full mb-4">
+            <span className="w-1.5 h-1.5 rounded-full bg-blue-500" />
+            Originality Check
+          </div>
+          <h1 className="text-3xl font-black text-stone-900 leading-tight">
+            Submit Your Document
+          </h1>
+          <p className="text-stone-500 mt-2 text-sm leading-relaxed">
+            Upload a document to verify its originality. Results are typically
+            ready within a few minutes.
+          </p>
+        </div>
+
+        {/* ── Card ──────────────────────────────────────────────────────── */}
+        <div className="bg-white rounded-3xl shadow-xl shadow-stone-200/80 border border-stone-100 overflow-hidden">
+          {/* Progress bar accent */}
+          <div className="h-1 w-full bg-linear-to-r from-blue-400 via-blue-500 to-indigo-400" />
+
+          <form
+            onSubmit={handleSubmit}
+            noValidate
+            className="p-7 flex md:flex-row flex-col gap-6"
+          >
+            {/* Status banners */}
+            {submission.status === 'success' && submission.response && (
+              <StatusBanner
+                status="success"
+                message={`Submission successful! ID: ${submission.response.submissionId}. ${submission.response.message}`}
+                onDismiss={resetSubmission}
+              />
+            )}
+            {submission.status === 'error' && submission.error && (
+              <StatusBanner
+                status="error"
+                message={submission.error}
+                onDismiss={resetSubmission}
+              />
+            )}
+
+            {/* left part */}
+            <div className="flex flex-col gap-6 md:max-w-[50%] w-full">
+              {/* Topic */}
+              <FieldWrapper
+                label="Document Topic"
+                htmlFor="topic"
+                error={errors.topic}
+                required
+              >
+                <TextInput
+                  id="topic"
+                  type="text"
+                  placeholder="e.g. The Impact of Artificial Intelligence on Education"
+                  value={form.topic}
+                  onChange={(e) => setTopic(e.target.value)}
+                  hasError={!!errors.topic}
+                  maxLength={200}
+                  disabled={isLoading}
+                />
+              </FieldWrapper>
+
+              {/* Sender Full Name (read-only) */}
+              <FieldWrapper label="Sender Full Name">
+                <ReadonlyField
+                  value={senderFullName || 'Not logged in'}
+                  icon={<UserIcon />}
+                />
+              </FieldWrapper>
+
+              {/* Certificate Option */}
+              <div>
+                <p className="text-sm font-semibold tracking-wide text-stone-700 uppercase mb-2">
+                  Certificate Option
+                </p>
+                <CertificateCheckbox
+                  checked={form.withCertificate}
+                  onChange={toggleCertificate}
+                />
+              </div>
+            </div>
+
+            {/* right part */}
+            <div className="flex flex-col gap-6 md:max-w-[50%] w-full">
+              {/* File Upload */}
+              <FieldWrapper label="Document File" error={errors.file} required>
+                <FileUploadField
+                  file={form.file}
+                  onFileChange={setFile}
+                  hasError={!!errors.file}
+                />
+              </FieldWrapper>
+
+              {/* Divider */}
+              <div className="border-t border-stone-100" />
+
+              {/* Submit */}
+              <SubmitButton isLoading={isLoading} />
+            </div>
+          </form>
+        </div>
+
+        {/* Footer note */}
+        <p className="text-center text-xs text-stone-400 mt-5">
+          Your document is processed securely and not stored beyond the analysis
+          period.
+        </p>
+      </div>
+    </div>
+  );
+}