Merge pull request #73 from alizul01/verification

feat: verification pages

app/(web)/verified/head.tsx

@@ -0,0 +1,13 @@
+import { Seo } from "~/components/Seo";
+
+type SeoDataManager = {
+  title: string;
+};
+
+const seoData: SeoDataManager = {
+  title: "Verified Polinema ID",
+};
+
+export default function Head() {
+  return <Seo seoData={seoData} />;
+}

app/(web)/verified/page.tsx

@@ -0,0 +1,69 @@
+"use client";
+import { useDropzone } from "react-dropzone";
+import React, { useState } from "react";
+
+export type UploadProps = {
+  path: string;
+  preview: string;
+  lastModified: number;
+  lastModifiedDate: Date;
+  name: string;
+  size: number;
+  type: string;
+  webkitRelativePath: string;
+}
+
+const verificationCriteria = [
+  "Kartu Tanda Mahasiswa (KTM) / Kartu Tanda Dosen (KTD) yang masih berlaku",
+  "Screenshot Siakad Politeknik Negeri Malang",
+  "Bukti kegiatan akademik",
+]
+
+const Upload: React.FC = () => {
+  const [files, setFiles] = useState<UploadProps[]>([]);
+  const { getRootProps, getInputProps } = useDropzone({
+    accept: { "image/*": [] },
+    onDrop: acceptedFiles => {
+      setFiles(acceptedFiles.map((file: any) => Object.assign(file, {
+        preview: URL.createObjectURL(file)
+      })));
+    }
+  });
+
+  const thumbnail = files.map((file) => (
+    <div key={file.name} className="flex flex-col items-center justify-center">
+      <img src={file.preview} className="w-auto h-32" />
+      <p className="text-sm text-gray-400">{file.name}</p>
+    </div>
+  ));
+
+  return (
+    <section className="flex flex-col gap-6 flex-wrap mt-16 max-w-7xl mx-auto">
+      <h1 className="text-3xl font-bold text-gray-200 text-center">Verifikasi Akun Mahasiswa / Dosen Politeknik Negeri Malang</h1>
+      <div {...getRootProps({ className: "flex flex-col flex-1 p-20 bg-slate-500/30 border-2 border-dashed border-slate-500/50 rounded-2xl cursor-pointer" })}>
+        <input {...getInputProps()} />
+        <p className="text-white text-sm font-semibold text-center"> Upload file </p>
+      </div>
+      <div>
+        <h1 className="text-xl font-bold text-gray-200">Kriteria Verifikasi</h1>
+        <span className="text-xs text-red-300">* pilih salah satu</span>
+        <ul className="ml-4 list-disc list-inside text-gray-400 mt-2">
+          {verificationCriteria.map((criteria, index) => (
+            <li key={index}>{criteria}</li>
+          ))}
+        </ul>
+      </div>
+      <div className="flex flex-row flex-wrap gap-4 mt-4">
+        {thumbnail}
+      </div>
+
+      <div className="flex flex-row gap-4">
+        <button className="btn btn-primary">Kirim</button>
+      </div>
+    </section>
+  )
+
+
+}
+
+export default Upload;

package.json

@@ -31,6 +31,7 @@
     "next": "13.1.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.43.1",
     "react-hot-toast": "^2.4.0",
     "react-icons": "^4.7.1",

parts/Index/Hero.tsx

@@ -26,8 +26,8 @@ export default function Hero() {
           </h4>
 
           <div className="flex flex-row gap-4 justify-start w-full">
-            <Link href="#step" className="btn btn-primary">
-              <h1>Get Started</h1>
+            <Link href="/idea" className="btn btn-primary">
+              <h1>Mulai cari ide</h1>
             </Link>
             <div className="flex flex-row items-center gap-2">
               <div className="relative">