[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":29,"_37":-5,"_38":39},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","68b4d8ee869081918e61b0a856807004","versionInt","title","Website Perpustakaan – Versi Dengan Copyright Tb Arya","type","code/react","content","import { useMemo, useState } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from \"@/components/ui/accordion\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/components/ui/select\";\nimport { Toaster } from \"@/components/ui/sonner\";\nimport { toast } from \"sonner\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport { Mail, Phone, MapPin, Search, ExternalLink, Send, LibraryBig, Database, UserPlus, Info, MessageSquare } from \"lucide-react\";\n\n// ---------- Dummy Data ----------\nconst CATEGORIES = [\n { id: \"semua\", name: \"Semua\" },\n { id: \"fiksi\", name: \"Fiksi\" },\n { id: \"nonfiksi\", name: \"Nonfiksi\" },\n { id: \"ilmu\", name: \"Sains & Teknologi\" },\n { id: \"sejarah\", name: \"Sejarah\" },\n { id: \"anak\", name: \"Anak\" },\n];\n\nconst BOOKS = [\n { id: 1, title: \"Laut Bercerita\", author: \"Leila S. Chudori\", year: 2017, category: \"fiksi\" },\n { id: 2, title: \"Algoritma & Pemrograman\", author: \"Rinaldi Munir\", year: 2020, category: \"ilmu\" },\n { id: 3, title: \"Sejarah Indonesia Modern\", author: \"M.C. Ricklefs\", year: 2008, category: \"sejarah\" },\n { id: 4, title: \"Psikologi Komunikasi\", author: \"Jalaluddin Rakhmat\", year: 2011, category: \"nonfiksi\" },\n { id: 5, title: \"Dongeng Nusantara\", author: \"Kolektif\", year: 2015, category: \"anak\" },\n { id: 6, title: \"Dasar-Dasar Elektronika\", author: \"Sedra/Smith\", year: 2014, category: \"ilmu\" },\n { id: 7, title: \"Bumi\", author: \"Tere Liye\", year: 2014, category: \"fiksi\" },\n { id: 8, title: \"Statistika Terapan\", author: \"Walpole\", year: 2012, category: \"nonfiksi\" },\n];\n\nconst DB_LINKS = [\n { name: \"GARUDA (Garba Rujukan Digital)\", url: \"https://garuda.kemdikbud.go.id\" },\n { name: \"Google Scholar\", url: \"https://scholar.google.com\" },\n { name: \"DOAJ (Open Access Journals)\", url: \"https://doaj.org\" },\n { name: \"Perpusnas e-Resources\", url: \"https://e-resources.perpusnas.go.id\" },\n];\n\nconst section = (id) => document.getElementById(id)?.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\n\nexport default function Perpustakaan() {\n // ---- Katalog\n const [query, setQuery] = useState(\"\");\n const [category, setCategory] = useState(\"semua\");\n const filteredBooks = useMemo(() => {\n return BOOKS.filter((b) =>\n (category === \"semua\" || b.category === category) &&\n (b.title.toLowerCase().includes(query.toLowerCase()) || b.author.toLowerCase().includes(query.toLowerCase()))\n );\n }, [query, category]);\n\n // ---- Komentar\n const [comments, setComments] = useState([]);\n const [commentName, setCommentName] = useState(\"\");\n const [commentText, setCommentText] = useState(\"\");\n const handleAddComment = () => {\n if (!commentName || !commentText) return toast.error(\"Nama dan komentar wajib diisi.\");\n const date = new Date().toLocaleString();\n setComments([{ name: commentName, text: commentText, date }, ...comments]);\n setCommentName(\"\");\n setCommentText(\"\");\n toast.success(\"Komentar ditambahkan.\");\n };\n\n // ---- Registrasi\n const [form, setForm] = useState({ name: \"\", email: \"\", phone: \"\", address: \"\", membership: \"umum\", agree: false });\n const handleRegister = (e) => {\n e.preventDefault();\n if (!form.name || !form.email || !form.agree) return toast.error(\"Lengkapi Nama, Email, dan setujui syarat.\");\n toast.success(\"Registrasi terkirim! Kami akan menghubungi melalui email.\");\n setForm({ name: \"\", email: \"\", phone: \"\", address: \"\", membership: \"umum\", agree: false });\n };\n\n return (\n

\n \n\n {/* Navbar */}\n

\n \n Perpustakaan Cerdas\n

\n {[\n { id: \"profil\", label: \"Profil\" },\n { id: \"katalog\", label: \"Katalog\" },\n { id: \"informasi\", label: \"Informasi & Layanan\" },\n { id: \"komentar\", label: \"Komentar\" },\n { id: \"db-online\", label: \"Database Online\" },\n { id: \"faq\", label: \"FAQ\" },\n { id: \"registrasi\", label: \"Registrasi Online\" },\n { id: \"kontak\", label: \"Kontak\" },\n ].map((item) => (\n \n ))}\n

\n \n

\n\n {/* Hero */}\n

\n \n

\n Perpustakaan Cerdas — Ilmu untuk Semua\n

\n Temukan ribuan koleksi, akses basis data akademik, dan nikmati layanan modern kami.\n

\n \n \n

\n {[\"Akses Cepat\", \"Wi‑Fi Gratis\", \"Ruang Diskusi\", \"e-Resources\"].map((t) => (\n \n \n Fitur\n

{t}

\n \n \n ))}\n

\n \n

\n\n {/* Profil */}\n

\n \n

Profil Perpustakaan

\n Perpustakaan Cerdas berdiri untuk mendukung pembelajaran sepanjang hayat. Fokus kami pada akses terbuka, literasi informasi, dan layanan digital terpadu.\n

Koleksi

25K+

Anggota

5K+

e-Resources

100+

\n\n {/* Katalog */}\n

\n \n

Katalog

\n setQuery(e.target.value)} />\n

\n \n

\n {filteredBooks.map((b) => (\n \n \n {b.title}\n \n \n

Penulis: {b.author}

Tahun: {b.year}

\n {CATEGORIES.find((c) => c.id === b.category)?.name}\n \n \n ))}\n

\n\n {/* Informasi & Layanan */}\n

\n \n

Informasi & Layanan

\n \n \n Layanan\n Aturan\n Jadwal\n \n \n {[\"Peminjaman Buku\", \"Pengembalian Mandiri (Book Drop)\", \"Keanggotaan\", \"Bimbingan Pustakawan\"].map((l) => (\n {l}\n ))}\n \n \n

Bawa kartu anggota saat transaksi.
Denda keterlambatan Rp1.000/hari/buku.
Jaga ketenangan di area baca.

\n \n \n

\n Senin–Jumat: 08.00–16.00\n Sabtu: 09.00–14.00\n Minggu: Tutup\n

\n \n \n

\n\n {/* Komentar */}\n

\n \n

Komentar Pengunjung

\n \n Tambahkan Komentar\n \n setCommentName(e.target.value)} />\n

setCommentText(e.target.value)} />\n              <Button onClick={handleAddComment} className=\"rounded-2xl\"><Send className=\"mr-2 size-4\"/>Kirim</Button>\n            </CardContent>\n          </Card>\n          <div className=\"space-y-3\">\n            {comments.length === 0 && <p className=\"text-slate-500 text-sm\">Belum ada komentar.</p>}\n            {comments.map((c, i) => (\n              <Card key={i} className=\"rounded-2xl\">\n                <CardContent className=\"p-4\">\n                  <p className=\"font-medium\">{c.name}</p>\n                  <p className=\"text-sm text-slate-600\">{c.text}</p>\n                  <p className=\"text-xs text-slate-400 mt-1\">{c.date}</p>\n                </CardContent>\n              </Card>\n            ))}\n          </div>\n        </div>\n      </section>\n\n      {/* Database Online */}\n      <section id=\"db-online\" className=\"max-w-6xl mx-auto px-4 py-12\">\n        <div className=\"flex items-center gap-2 mb-3\">\n          <Database className=\"size-5\" />\n          <h2 className=\"text-2xl font-bold\">Link Database Online</h2>\n        </div>\n        <div className=\"grid sm:grid-cols-2 lg:grid-cols-3 gap-4\">\n          {DB_LINKS.map((d) => (\n            <Card key={d.url} className=\"rounded-2xl\">\n              <CardHeader><CardTitle className=\"text-base\">{d.name}</CardTitle></CardHeader>\n              <CardContent>\n                <a href={d.url} target=\"_blank\" rel=\"noreferrer\" className=\"inline-flex items-center gap-2 text-sm underline\">\n                  Kunjungi <ExternalLink className=\"size-4\" />\n                </a>\n              </CardContent>\n            </Card>\n          ))}\n        </div>\n      </section>\n\n      {/* FAQ */}\n      <section id=\"faq\" className=\"max-w-6xl mx-auto px-4 py-12\">\n        <h2 className=\"text-2xl font-bold mb-3\">FAQ</h2>\n        <Accordion type=\"single\" collapsible className=\"rounded-2xl\">\n          <AccordionItem value=\"item-1\">\n            <AccordionTrigger>Bagaimana cara menjadi anggota?</AccordionTrigger>\n            <AccordionContent>Daftar melalui formulir online, lalu aktivasi di meja layanan dengan KTP/pelajar.</AccordionContent>\n          </AccordionItem>\n          <AccordionItem value=\"item-2\">\n            <AccordionTrigger>Berapa lama masa pinjam?</AccordionTrigger>\n            <AccordionContent>14 hari dan bisa diperpanjang sekali jika tidak ada antrian.</AccordionContent>\n          </AccordionItem>\n          <AccordionItem value=\"item-3\">\n            <AccordionTrigger>Apakah ada Wi‑Fi?</AccordionTrigger>\n            <AccordionContent>Ya, tersedia gratis untuk anggota terdaftar.</AccordionContent>\n          </AccordionItem>\n        </Accordion>\n      </section>\n\n      {/* Registrasi Online */}\n      <section id=\"registrasi\" className=\"max-w-6xl mx-auto px-4 py-12\">\n        <div className=\"flex items-center gap-2 mb-3\">\n          <UserPlus className=\"size-5\" />\n          <h2 className=\"text-2xl font-bold\">Registrasi Online</h2>\n        </div>\n        <form onSubmit={handleRegister} className=\"grid md:grid-cols-2 gap-4\">\n          <Input placeholder=\"Nama Lengkap *\" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />\n          <Input placeholder=\"Email *\" type=\"email\" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} />\n          <Input placeholder=\"No. HP\" value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} />\n          <Input placeholder=\"Alamat\" value={form.address} onChange={(e) => setForm({ ...form, address: e.target.value })} />\n          <div className=\"md:col-span-2 grid sm:grid-cols-2 gap-4 items-center\">\n            <div>\n              <label className=\"text-sm text-slate-600\">Jenis Keanggotaan</label>\n              <Select value={form.membership} onValueChange={(v) => setForm({ ...form, membership: v })}>\n                <SelectTrigger className=\"mt-1\"><SelectValue placeholder=\"Pilih jenis\" /></SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"umum\">Umum</SelectItem>\n                  <SelectItem value=\"mahasiswa\">Mahasiswa</SelectItem>\n                  <SelectItem value=\"pelajar\">Pelajar</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n            <label className=\"flex items-center gap-2 text-sm text-slate-600\">\n              <Checkbox checked={form.agree} onCheckedChange={(v) => setForm({ ...form, agree: Boolean(v) })} />\n              Saya setuju dengan syarat & ketentuan *\n            </label>\n          </div>\n          <div className=\"md:col-span-2\">\n            <Button type=\"submit\" className=\"rounded-2xl\">Kirim Registrasi</Button>\n          </div>\n        </form>\n      </section>\n\n      {/* Kontak */}\n      <section id=\"kontak\" className=\"max-w-6xl mx-auto px-4 py-12\">\n        <div className=\"flex items-center gap-2 mb-3\">\n          <Mail className=\"size-5\" />\n          <h2 className=\"text-2xl font-bold\">Kontak</h2>\n        </div>\n        <div className=\"grid sm:grid-cols-3 gap-4 text-slate-600\">\n          <Card className=\"rounded-2xl\"><CardContent className=\"p-4 flex items-center gap-2\"><Phone className=\"size-4\"/> 021‑1234‑5678</CardContent></Card>\n          <Card className=\"rounded-2xl\"><CardContent className=\"p-4 flex items-center gap-2\"><Mail className=\"size-4\"/> info@perpustakaan.id</CardContent></Card>\n          <Card className=\"rounded-2xl\"><CardContent className=\"p-4 flex items-center gap-2\"><MapPin className=\"size-4\"/> Jl. Ilmu No. 7, Jakarta</CardContent></Card>\n        </div>\n      </section>\n\n      {/* FOOTER COPYRIGHT */}\n      <footer className=\"border-t bg-white/70 backdrop-blur\">\n        <div className=\"max-w-6xl mx-auto px-4 py-6 flex flex-col sm:flex-row items-center justify-between gap-2 text-sm text-slate-600\">\n          <p>© {new Date().getFullYear()} · Copyright by <span className=\"font-semibold\">TB Arya</span></p>\n          <p className=\"text-xs\">Dibangun dengan React, Tailwind, dan shadcn/ui.</p>\n        </div>\n      </footer>\n    </div>\n  );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_40":41,"_42":43},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","manageRootRouteStylesheet","promoteCss","disableSSR","stripModulepreloadImports","paidCampaignAppRedirect","statsigGateEvaluationsPromise",["P",39],"traceId","5718130125504020461","traceTime",1786646158944]
</article></body></html>