Skip to content

Commit

Permalink
Merge branch 'core-team'
Browse files Browse the repository at this point in the history
  • Loading branch information
@hamisirizwan
hamisirizwan committed Sep 17, 2023
2 parents f246906 + 7b52e8d commit 59ca3a3
Show file tree
Hide file tree
Showing 25 changed files with 1,073 additions and 100 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
"@fortawesome/free-solid-svg-icons": "^6.4.0",
"@fortawesome/react-fontawesome": "^0.2.0",
"@headlessui/react": "^1.7.15",
"date-fns": "^2.30.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.11.2",
Expand Down
4 changes: 2 additions & 2 deletions src/ADMIN/components/AdminHeader.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ function AdminHeader() {
</Link>
<Link
className="text-[#7E8180] hover:text-[#009975] transition-all duration-300 cursor-pointer"
to="/blogs"
to="/admin"
>
Blogs
</Link>
Expand All @@ -68,7 +68,7 @@ function AdminHeader() {
</Link>
<Link
className="text-[#7E8180] hover:text-[#009975] transition-all duration-300 cursor-pointer"
to="/calendar"
to="/admin/calendar"
>
Calendar
</Link>
Expand Down
4 changes: 2 additions & 2 deletions src/ADMIN/components/BottomNavBar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,13 @@ function BottomNavBar() {
</Link>
<Link
className="text-[#7E8180] hover:text-[#009975] transition-all duration-300 cursor-pointer"
to="/chapters"
to="/admin/all-chapters"
>
Chapters
</Link>
<Link
className="text-[#7E8180] hover:text-[#009975] transition-all duration-300 cursor-pointer"
to="/events"
to="/admin/events"
>
Events
</Link>
Expand Down
150 changes: 96 additions & 54 deletions src/ADMIN/components/Organizers.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,82 +1,124 @@
import * as React from "react";
import { useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPlus } from "@fortawesome/free-solid-svg-icons";

function Organizers() {
const [selectedImage, setSelectedImage] = React.useState(null);

const handleImageChange = (event) => {
const imageFile = event.target.files[0];
setSelectedImage(imageFile);
const handleImageChange = (event, index) => {
const updatedOrganizers = [...organizers]
updatedOrganizers[index].image = event.target.files[0]
setOrganizers(updatedOrganizers);
};

const handleUploadImageClick = () => {
document.getElementById("imageInput").click();
const handleUploadImageClick = (e,id) => {
document.getElementById(id).click();
};
const handleUploadImageKeyDown = (event) => {

const handleUploadImageKeyDown = (event,id) => {
if (event.key === "Enter") {
handleUploadImageClick();
handleUploadImageClick(event,id);
}
};

const handleChange =(e, index)=>{
const updatedOrganizers = [...organizers]
updatedOrganizers[index] = {...updatedOrganizers[index], [e.target.name.slice(0, -1)]:e.target.value}
setOrganizers(updatedOrganizers);
// console.log(organizers)
}
const [organizers, setOrganizers] = useState([
{
name: "",
role:"",
image:null
},
]);

const addOrganiser = () =>{
setOrganizers([...organizers, {
name: "",
role:"",
image:null
}]);
// console.log(organizers)
}

return (
<div className=" w-3/4 mt-4 items-center">
<p className="tracking-wider text-lg font-normal text-[#323433]">
Organizers
</p>
<form>
<div className="w-full mt-4 h-10">
<input
id="username"
className="w-full h-12 px-4 py-2 border rounded-lg focus:outline-none focus:ring focus:border-blue-300"
type="text"
placeholder="Organizers Name"
/>
</div>
<div className="w-full mt-4 h-10">
<input
id="username"
className="w-full h-12 px-4 py-2 border rounded-lg focus:outline-none focus:ring focus:border-blue-300"
type="text"
placeholder="Organizers Role"
/>
</div>
<div
className="w-full pl-4 py-2 mt-4 border-dashed border-2 border-gray-300 rounded-tl rounded-tr justify-start items-center inline-flex"
onClick={handleUploadImageClick}
onKeyDown={handleUploadImageKeyDown}
tabIndex="0"
role="button"
>
<input
type="file"
id="imageInput"
accept=".png,.jpg,.jpeg,.jfif"
onChange={handleImageChange}
style={{ display: "none" }}
/>
<div className="grow shrink basis-0 h-[87px] flex-col justify-center items-center gap-2 inline-flex">
<div className="justify-start items-center inline-flex">
<div className="text-zinc-700 text-base font-normal">
Upload Organizer’s Image
</div>
{organizers.map((organizer, index) => (
<div className="my-6">
{organizers.length > 1 && (
<p className="tracking-wider text-sm font-normal text-[#323433]">
{`Organiser ${index + 1}`}
</p>
)}
<div className="w-full mt-4 h-10">
<input
id="username"
className="w-full h-12 px-4 py-2 border rounded-lg focus:outline-none focus:ring focus:border-blue-300"
type="text"
placeholder="Organizers Name"
name={`name${index}`}
value={organizers[index].name}
onChange={(e)=>handleChange(e, index)}
/>
</div>
{selectedImage ? (
<div className="mt-4 rounded">
<p>{selectedImage.name}</p>
</div>
) : (
<div className="justify-start items-center inline-flex">
<div className="text-zinc-700 text-xs font-normal leading-[18px] tracking-tight">
PNG, JPG, JFIF
<div className="w-full mt-4 h-10">
<input
id="role"
className="w-full h-12 px-4 py-2 border rounded-lg focus:outline-none focus:ring focus:border-blue-300"
type="text"
placeholder="Organizers Role"
name={`role${index}`}
value={organizers[index].role}
onChange={(e)=>handleChange(e, index)}
/>
</div>
<div
className="w-full pl-4 py-2 mt-4 border-dashed border-2 border-gray-300 rounded-tl rounded-tr justify-start items-center inline-flex"
onClick={(e)=>handleUploadImageClick(e,`imageInput${index}`)}
onKeyDown={(e)=>handleUploadImageKeyDown((e,`imageInput${index}`))}
tabIndex="0"
role="button"
>
<input
type="file"
id={`imageInput${index}`}
accept=".png,.jpg,.jpeg,.jfif"
onChange={(e)=>handleImageChange(e, index)}
style={{ display: "none" }}
/>
<div className="grow shrink basis-0 h-[87px] flex-col justify-center items-center gap-2 inline-flex">
<div className="justify-start items-center inline-flex">
<div className="text-zinc-700 text-base font-normal">
Upload Organizer’s Image
</div>
</div>
{organizer.image ? (
<div className="mt-4 rounded">
<p>{organizer.image.name}</p>
</div>
) : (
<div className="justify-start items-center inline-flex">
<div className="text-zinc-700 text-xs font-normal leading-[18px] tracking-tight">
PNG, JPG, JFIF
</div>
</div>
)}
</div>
)}
</div>
</div>
</div>
))}

{/* add organisers button */}
<div className="w-full mt-4 items-center inline-flex justify-end ">
<button
type="button"
onClick={addOrganiser}
className="w-[154px] h-11 px-3.5 py-3 rounded-lg border border-emerald-600 text-emerald-600 text-[13px] font-medium leading-tight tracking-tight justify-end items-center gap-2.5 inline-flex"
>
<FontAwesomeIcon
Expand Down
Loading

1 comment on commit 59ca3a3

@vercel
Copy link

@vercel vercel bot commented on 59ca3a3 Sep 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

syt-web-redesign – ./

syt-web-redesign-git-main-sytweb.vercel.app
syt-web-redesign-sytweb.vercel.app
syt-web-redesign.vercel.app

Please sign in to comment.