Skip to content

Commit

Permalink
Merge pull request #7 from steik-ITB-23/feat/ComponentForm/Alvin
Browse files Browse the repository at this point in the history 
Feedback Form
  • Loading branch information
@yonatan-nyo
yonatan-nyo authored Apr 10, 2024
2 parents fe78d18 + 2b483c3 commit 24475fb
Show file tree
Hide file tree
Showing 6 changed files with 117 additions and 153 deletions.
9 changes: 2 additions & 7 deletions src/components/BPACard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,7 @@ const BPACard = ({ imgUrl, name, position, hideName }: memberBPA) => {
return (
<div className="w-[38%] sm:w-[18%] min-w-[200px] max-w-[200px] h-auto text-center drop-shadow-xl border-4 rounded-xl flex flex-col bg-slate-50 border-slate-50 hover:scale-110 duration-150 ease-in hover:shadow-lg hover:font-semibold flex-grow-0 aspect-[3/4]">
<Image
src={
imgUrl ||
"https://utfs.io/f/7648af4a-e902-454b-b937-b7433ef9aa2b-vbi1vd.svg"
}
src={imgUrl || "https://utfs.io/f/7648af4a-e902-454b-b937-b7433ef9aa2b-vbi1vd.svg"}
alt={name}
width={300}
height={700}
Expand All @@ -24,9 +21,7 @@ const BPACard = ({ imgUrl, name, position, hideName }: memberBPA) => {
{!hideName && (
<div className="flex justify-center items-center flex-grow">
<p className="border-t-2 border-slate-300 px-2 py-3">{name}</p>
{position && (
<p className="border-t-2 border-slate-300 px-2 py-3">{position}</p>
)}
{position && <p className="border-t-2 border-slate-300 px-2 py-3">{position}</p>}
</div>
)}
</div>
Expand Down
9 changes: 2 additions & 7 deletions src/components/BPAbutton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,10 @@ const BPAbutton = ({ data }: { data: bpaType }) => {
return (
<Link
href={`/tentang-bpa/#${getSlug(data.name)}`}
className="border-2 rounded-full border-[#101351] md:border-slate-200 h-fit px-2 py-0.5 hover:bg-slate-50/50 ease-in duration-75"
>
className="border-2 rounded-full border-[#101351] md:border-slate-200 h-fit px-2 py-0.5 hover:bg-slate-50/50 ease-in duration-75">
<p className="button">
<span className="text-[#101351] md:text-white">{data.name}</span>{" "}
{data.members.length > 1 && (
<span className="font-bold text-[#79B5EE]">
{data.members.length}
</span>
)}
{data.members.length > 1 && <span className="font-bold text-[#79B5EE]">{data.members.length}</span>}
</p>
</Link>
);
Expand Down
28 changes: 5 additions & 23 deletions src/components/BPAinfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,46 +26,28 @@ const BPAInfo = ({ data }: { data: bpaType }) => {
};

return (
<div
className="w-full pb-8 py-2"
id={getSlug(data.name)}
data-aos="fade-right"
>
<div className="w-full pb-8 py-2" id={getSlug(data.name)} data-aos="fade-right">
<div className="flex w-full border-b-2 gap-2 items-center">
<h2 className="font-bold text-xl">{data.name}</h2>
<span
className="text-xl font-bold text-blue-600 cursor-pointer hover:text-blue-500"
onClick={handleCopyLink}
>
<span className="text-xl font-bold text-blue-600 cursor-pointer hover:text-blue-500" onClick={handleCopyLink}>
#
</span>
{copySuccess && (
<span className="text-blue-500 ml-2 text-sm">Copied!</span>
)}
{copySuccess && <span className="text-blue-500 ml-2 text-sm">Copied!</span>}
</div>
{data.members.length > 1 ? (
<>
<p className="py-2 font-light">{data.jobDesc}</p>
<div className="flex gap-4 flex-wrap w-full justify-center sm:justify-start">
{data.members.map((member, idx) => (
<BPACard
key={`${idx}-${member}-${data.name}`}
name={member.name}
imgUrl={member.imgUrl}
/>
<BPACard key={`${idx}-${member}-${data.name}`} name={member.name} imgUrl={member.imgUrl} />
))}
</div>
</>
) : (
<div className="flex flex-col lg:flex-row gap-2 w-full py-4">
<div className="flex gap-4 flex-wrap w-full sm:w-fit flex-grow-0 justify-center sm:justify-start">
{data.members.map((member, idx) => (
<BPACard
key={`${idx}-${member}-${data.name}`}
name={member.name}
imgUrl={member.imgUrl}
hideName={true}
/>
<BPACard key={`${idx}-${member}-${data.name}`} name={member.name} imgUrl={member.imgUrl} hideName={true} />
))}
</div>
<p className="py-2 font-light">
Expand Down
73 changes: 73 additions & 0 deletions src/components/FeedbackForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import React, { useState } from "react";
import Button from "@/components/Button";

interface FeedbackFormProps {
onSubmit: (
feedback: string,
isAnonymous: boolean,
senderName?: string,
) => void;
}

const FeedbackForm: React.FC<FeedbackFormProps> = ({ onSubmit }) => {
const [feedback, setFeedback] = useState("");
const [isAnonymous, setIsAnonymous] = useState(false);
const [senderName, setSenderName] = useState("");

const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
onSubmit(feedback, isAnonymous, isAnonymous ? undefined : senderName);
// Reset form fields after submission
setFeedback("");
setIsAnonymous(false);
setSenderName("");
};

return (
<div className='border-2 border-black rounded-[24px] w-full sm:w-[640px]'>
<form onSubmit={handleSubmit} className="max-w-full m-10">
<h1 className='font-bold text-[24px] sm:text-[32px] mb-4'>Form Feedback/Saran</h1>
{!isAnonymous && (
<div className="mb-4 relative">
<label className="bg-white px-[6px] absolute top-0 left-3 transition-all -translate-y-[10px] text-sm text-[#666666]">Nama Pengirim</label>
<input
type="text"
className="border-2 border-[#666666] rounded-xl px-3 py-2 w-full focus:outline-none focus:border-black"
value={senderName}
onChange={(e) => setSenderName(e.target.value)}
required
/>
<div className="border-b-2 border-transparent absolute bottom-0 left-0 right-0 pointer-events-none"></div>
</div>

)}
<div className="mb-2 relative">
<label className="bg-white px-[6px] absolute top-0 left-3 transition-all -translate-y-[10px] text-sm text-[#666666]">
Feedback/Saran
</label>
<textarea
className="border-2 border-[#666666] rounded-lg px-3 py-2 w-full focus:outline-none focus:border-black"
rows={4}
value={feedback}
onChange={(e) => setFeedback(e.target.value)}
required
></textarea>
</div>
<div className="mb-4 flex items-center">
<input
type="checkbox"
className="mr-2"
checked={isAnonymous}
onChange={(e) => setIsAnonymous(e.target.checked)}
/>
<label className="text-sm">Anonymous</label>
</div>
<Button type="submit" className="w-full bg-[#101351]">
Submit
</Button>
</form>
</div>
);
};

export default FeedbackForm;
101 changes: 23 additions & 78 deletions src/components/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,26 +8,13 @@ import { GoHome, GoCopilot } from "react-icons/go";
import { IoMdBook } from "react-icons/io";
import { RiGroupLine } from "react-icons/ri";

const NavListDesktop = ({
href,
routerPathname,
lable,
}: {
href: string;
routerPathname: string;
lable: string;
}) => (
const NavListDesktop = ({ href, routerPathname, lable }: { href: string; routerPathname: string; lable: string }) => (
<Link href={href} className="hidden md:block h-full">
<p
className={
routerPathname === href
? "border-b-2 border-gray-400"
: "hover:brightness-110 hover:border-b-2 border-gray-400"
}
>
<span className="text-[16px] lg:text-[18px] font-outfit tracking-wider">
{lable}
</span>
routerPathname === href ? "border-b-2 border-gray-400" : "hover:brightness-110 hover:border-b-2 border-gray-400"
}>
<span className="text-[16px] lg:text-[18px] font-outfit tracking-wider">{lable}</span>
</p>
</Link>
);
Expand Down Expand Up @@ -81,20 +68,12 @@ const Navbar = () => {
<>
<header
className={`sticky left-0 top-0 z-50 h-[5.2rem] flex w-full items-center px-0 duration-500 ease-in-out ${scrollDirection ? "translate-y-0" : "-translate-y-24"} ${
router.pathname === "/" && !scrolledOneThirdvw
? "bg-none"
: "bg-[#101351]"
}`}
>
router.pathname === "/" && !scrolledOneThirdvw ? "bg-none" : "bg-[#101351]"
}`}>
<div className="w-full px-2 mx-auto">
<div className="relative flex items-center justify-between">
<Link
href="/"
className="w-fit h-[5rem] flex items-center gap-4 pl-4"
>
<div
className={`h-4 min-h-full py-2 transition-all duration-300`}
>
<Link href="/" className="w-fit h-[5rem] flex items-center gap-4 pl-4">
<div className={`h-4 min-h-full py-2 transition-all duration-300`}>
<Image
src="https://utfs.io/f/7648af4a-e902-454b-b937-b7433ef9aa2b-vbi1vd.svg"
className={`w-full h-full cursor-pointer object-contain`}
Expand All @@ -107,13 +86,11 @@ const Navbar = () => {
</div>
<div className="flex flex-col justify-center gap-0 pt-1">
<h1
className={`font-extrabold uppercase text-2xl duration-100 ease-in tracking-wider font-outfit h-fit leading-4 ${getTextColor()}`}
>
className={`font-extrabold uppercase text-2xl duration-100 ease-in tracking-wider font-outfit h-fit leading-4 ${getTextColor()}`}>
Syntax
</h1>
<p
className={`text-[16px] lg:text-lg duration-100 ease-in tracking-wider font-outfit leading-6 ${getTextColor()}`}
>
className={`text-[16px] lg:text-lg duration-100 ease-in tracking-wider font-outfit leading-6 ${getTextColor()}`}>
code, create, connect
</p>
</div>
Expand All @@ -123,28 +100,11 @@ const Navbar = () => {
<div className="flex gap-2 sm:gap-4 md:gap-6 lg:gap-10 items-center">
{/* Desktop navigation list */}
<div
className={`flex gap-0 py-1 text-[#6B778C] md:gap-6 lg:gap-8 lg:py-5 xl:gap-12 uppercase items-center ${getTextColor()}`}
>
<NavListDesktop
href="/"
routerPathname={router.pathname}
lable="Home"
/>
<NavListDesktop
href="/tentang-bpa"
routerPathname={router.pathname}
lable="BPA"
/>
<NavListDesktop
href="/akademik"
routerPathname={router.pathname}
lable="Akademik"
/>
<NavListDesktop
href="/acara-kemahasiswaan"
routerPathname={router.pathname}
lable="Acara"
/>
className={`flex gap-0 py-1 text-[#6B778C] md:gap-6 lg:gap-8 lg:py-5 xl:gap-12 uppercase items-center ${getTextColor()}`}>
<NavListDesktop href="/" routerPathname={router.pathname} lable="Home" />
<NavListDesktop href="/tentang-bpa" routerPathname={router.pathname} lable="BPA" />
<NavListDesktop href="/akademik" routerPathname={router.pathname} lable="Akademik" />
<NavListDesktop href="/acara-kemahasiswaan" routerPathname={router.pathname} lable="Acara" />
</div>

{/* Mobile Nav Button */}
Expand All @@ -153,54 +113,39 @@ const Navbar = () => {
</div>
<button
className="block md:hidden hover:brightness-95 p-2 rounded-md ml-2 text-[#6B778C]"
onClick={() => handleNav(true)}
>
onClick={() => handleNav(true)}>
<RxHamburgerMenu size={30} />
</button>

{/* Mobile Nav List */}
<div
onClick={() => handleNav(false)}
className={`text-slate-800 ${navMobile ? "md:hidden fixed left-0 top-0 w-full h-screen bg-black/70" : ""}`}
>
className={`text-slate-800 ${navMobile ? "md:hidden fixed left-0 top-0 w-full h-screen bg-black/70" : ""}`}>
<div
className={
navMobile
? "fixed right-0 top-0 w-[240px] h-screen bg-slate-50 p-4 pt-10 ease-in duration-500 flex flex-col gap-4"
: "fixed right-[-150%] w-[240px] h-screen bg-slate-50 top-0 p-4 pt-10 ease-in duration-500 flex flex-col gap-4 items-start"
}
>
}>
<section className="space-y-2">
<p className="text-3xl font-bold leading-none">SYNTAX</p>
<p className="font-bold">STEI-K 23</p>
<p className="text-sm font-bold italic leading-none mb-10">
Code, Create, Connect!
</p>
<p className="text-sm font-bold italic leading-none mb-10">Code, Create, Connect!</p>
</section>

<section className="flex flex-col gap-1">
<Link
href="/"
className="bg-slate-50 hover:brightness-95 pl-2 py-1 flex items-center gap-2"
>
<Link href="/" className="bg-slate-50 hover:brightness-95 pl-2 py-1 flex items-center gap-2">
<GoHome size={19} /> Home
</Link>
<Link
href="/tentang-bpa"
className="bg-slate-50 hover:brightness-95 pl-2 py-1 flex items-center gap-2"
>
<Link href="/tentang-bpa" className="bg-slate-50 hover:brightness-95 pl-2 py-1 flex items-center gap-2">
<GoCopilot size={19} /> BPA
</Link>
<Link
href="/akademik"
className="bg-slate-50 hover:brightness-95 pl-2 py-1 flex items-center gap-2"
>
<Link href="/akademik" className="bg-slate-50 hover:brightness-95 pl-2 py-1 flex items-center gap-2">
<IoMdBook size={19} /> Akademik
</Link>
<Link
href="/acara-kemahasiswaan"
className="bg-slate-50 hover:brightness-95 pl-2 py-1 flex items-center gap-2"
>
className="bg-slate-50 hover:brightness-95 pl-2 py-1 flex items-center gap-2">
<RiGroupLine size={19} /> Acara Kemahasiswaan
</Link>
</section>
Expand Down
Loading

0 comments on commit 24475fb

Please sign in to comment.