From 1fcdd9f7d859b925bf92265f441655d5522e351c Mon Sep 17 00:00:00 2001 From: Factiven Date: Tue, 11 Apr 2023 23:23:29 +0700 Subject: initial commit --- pages/staff.js | 431 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 431 insertions(+) create mode 100644 pages/staff.js (limited to 'pages/staff.js') diff --git a/pages/staff.js b/pages/staff.js new file mode 100644 index 0000000..a38d3e8 --- /dev/null +++ b/pages/staff.js @@ -0,0 +1,431 @@ +import Head from "next/head"; +import { useState } from "react"; +import Footer from "../components/footer"; +import Navbar from "../components/navbar"; +import Twitter from "../components/media/twitter"; +import Instagram from "../components/media/instagram"; +import Discord from "../components/media/discord"; +import AniList from "../components/media/aniList"; + +export default function Staff() { + const dev = { + name: "Factiven", + desc: "“Bawah gw gay”", + coverImage: + "https://cdn.discordapp.com/attachments/986579286397964290/1058308027075276890/1160925.jpg", + iClass: "bg-center rounded-t-lg", + socials: { + twitter: "https://twitter.com/Factivens", + ig: "https://www.instagram.com/dvnabny/", + discord: "Factiven#9110", + aniList: "https://anilist.co/user/DevanAbinaya/", + }, + }; + + const [copied, setCopied] = useState(false); + + const handleClickDev = () => { + if (navigator.clipboard) { + navigator.clipboard.writeText(dev.socials.discord).then(() => { + setCopied(true); + setTimeout(() => { + setCopied(false); + }, 3000); + }); + } else { + // Fallback action if navigator.clipboard is not supported + const textarea = document.createElement("textarea"); + textarea.value = dev.socials.discord; + document.body.appendChild(textarea); + textarea.select(); + document.execCommand("copy"); + document.body.removeChild(textarea); + setCopied(true); + setTimeout(() => { + setCopied(false); + }, 3000); + } + }; + + const DevCard = () => { + return ( +
+
+
+
+
+

{dev.name}

+
+
+ + + + + + + + + + + + + + Lead Developer + +
+
+ + + + + Lead Designer + +
+
+
+
+

{dev.desc}

+ + {dev.socials && ( +
+
+
+ {dev.socials.twitter && ( +
+ + + +
+ )} + {dev.socials.ig && ( +
+ + + +
+ )} + {dev.socials.discord && ( +
+ + + + {copied && ( + + Discord Tag copied to clipboard + + )} +
+ )} + {dev.socials.aniList && ( +
+ + + +
+ )} +
+
+
+ )} +
+
+ ); + }; + + const staff = [ + { + id: 1, + name: "rapiips_", + desc: "Time is precious, waste it wisely", + coverImage: + "https://media.discordapp.net/attachments/1068758633464201268/1072001529889959946/anime-girl-morning-breakfast-4k-wallpaper-uhdpaper.com-850i.jpg?width=1246&height=701", + bgPosition: "50% 25%", + socials: { + ig: "https://www.instagram.com/rapiips_/", + discord: "Pipip#5048", + }, + tags: { + moral: "Pendukung Moral", + }, + }, + { + id: 2, + name: "Isantuyskl", + desc: "Sedang mencari.", + coverImage: + "https://cdn.discordapp.com/attachments/986579286397964290/1058420833376280656/23264b905fcd7ed378a6b3c5d8f2a047_7598772829043055595.png", + bgPosition: "50% 15%", + socials: { + ig: "https://www.instagram.com/isantuyskl/", + discord: "X-San#5418", + aniList: "https://anilist.co/user/isantuyskl/", + }, + tags: { + moral: "Pendukung Moral", + design: "Idea Proposer", + }, + }, + { + id: 3, + name: "kha//sak?", + desc: "if you don't like it, ignore it\nI know your future, you can't defeat me..", + socials: { + ig: "https://www.instagram.com/khasakh_1364/", + discord: "sakh#0835", + }, + tags: { + design: "Idea Proposer", + }, + }, + ]; + + const StaffCard = () => { + const [copySuccess, setCopySuccess] = useState(""); + + // your function to copy here + + const copyStaff = async (copyMe) => { + try { + await navigator.clipboard.writeText(copyMe); + setCopySuccess("Copied!"); + } catch (err) { + setCopySuccess("Failed to copy!"); + } + }; + + return ( +
+ {staff.map((post) => ( +
+
+ {/* Profile Picture */} +
+
+
+
+

+ {post.name} +

+ {post.tags && ( +
+ {post.tags.dev && ( +
+ + + + + + + + + + + + + + {post.tags.dev} + +
+ )} + + {post.tags.moral && ( +
+ + + + + + + + + + + + {post.tags.moral} + +
+ )} + + {post.tags.design && ( +
+ + + + + {post.tags.design} + +
+ )} +
+ )} +
+
+

+ “{post.desc || "description not provided"}” +

+ {post.socials && ( +
+
+
+ {post.socials.twitter && ( +
+ + + +
+ )} + {post.socials.ig && ( +
+ + + +
+ )} + {post.socials.discord && ( +
+ copyStaff(post.socials.discord)}> + + + + Tap to copy Discord Tag + +
+ )} + {post.socials.aniList && ( +
+ + + +
+ )} +
+
+
+ )} +
+
+ ))} +
+ ); + }; + + return ( + <> + + Moopa - Staff + + + + + + + +
+
+

+ MAIN CHARACTER +

+
+ + {/* MAIN CHAR */} + {DevCard()} + +
+

+ SIDE CHARACTER +

+
+ + {/* SIDE CHAR */} + {StaffCard()} +
+ +