Skip to content

Commit

Permalink
feat: gallery page
Browse files Browse the repository at this point in the history
  • Loading branch information
@sonylomo
sonylomo committed Apr 18, 2024
1 parent 798dcfe commit 5afe5ef
Show file tree
Hide file tree
Showing 9 changed files with 301 additions and 325 deletions.
93 changes: 0 additions & 93 deletions src/APP/pages/aboutUs/sections/PartnerCTA.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,58 +1,9 @@
// import AaronAbubakar from "../../../../assets/images/aboutPage/creativeTeam/aaron-abubakar.jpeg";
// import PamelaOwino from "../../../../assets/images/aboutPage/creativeTeam/pamela-owino.png";
// import EmmyAkinyi from "../../../../assets/images/aboutPage/creativeTeam/emmy-akinyi.jpeg";
// import Temitayo from "../../../../assets/images/aboutPage/creativeTeam/temitayo.jpeg";
// import TempPic from "../../../../assets/images/aboutPage/leadership/james-otieno.png";
// import {
// facebook,
// instagram,
// linkedin,
// twitter,
// discord,
// } from "../../../../assets/images/socials";
// import Caroussel from "../../../components/Caroussel";

// const CreativeTeamData = [
// {
// name: "Emmy Akinyi",
// title: "UX Team Lead",
// image: EmmyAkinyi,
// },
// {
// name: "Pamela Owino",
// title: "Lead Product Designer",
// image: PamelaOwino,
// },
// {
// name: "Aaron Abubakar",
// title: "Product Designer",
// image: AaronAbubakar,
// },
// {
// name: "Robert Okusi",
// title: "Product Designer",
// image: TempPic,
// },
// {
// name: "Temitayo",
// title: "Product Designer",
// image: Temitayo,
// },
// ];

function PartnerCTA() {
return (
<section className="pt-16 pb-10 mx-auto w-full max-w-screen-2xl">
{/* <h1 className="sm:text-3xl text-2xl font-semibold title-font text-[#323433] text-center">
The Creative Team
</h1>
<Caroussel CarousselData={CreativeTeamData} /> */}
<div className="flex flex-col sm:flex-row justify-between px-4 sm:px-28">
<div className="space-y-4 mb-8 sm:mb-0">
<h3 className="font-semibold text-md sm:text-xl">Our Reports</h3>
{/* <p><a href="/" className="text-primary text-sm sm:text-base">Annual SpaceYaTech Report - 2022</a></p>
<p><a href="/" className="text-primary text-sm sm:text-base">Mentorlst Leadership and Growth</a></p> */}
<p>
<a
href="/src/assets/reports/spaceyatech-internship-program.pdf"
Expand All @@ -64,50 +15,6 @@ function PartnerCTA() {
</a>
</p>
</div>
{/* <div>
<h3 className="font-semibold">Follow us on social media </h3>
<div className="flex items-center w-full space-evenly py-4">
<a
href="https://x.com/SpaceYaTech"
target="_blank"
rel="noopener noreferrer"
>
<img src={twitter} alt="twitter" className="w-12 h-12" />
</a>
<a
href="https://linkedin.com/company/spaceyatech"
target="_blank"
rel="noopener noreferrer"
>
<img src={linkedin} alt="linkedin" className="w-12 h-12" />
</a>
<a
href="https://discord.com/invite/T6zTMWsnnS"
target="_blank"
rel="noopener noreferrer"
>
<img src={discord} alt="discord" className="w-12 h-12 p-3" />
</a>
<a
href="https://www.instagram.com/SpaceYaTech"
target="_blank"
rel="noopener noreferrer"
>
<img src={instagram} alt="instagram" className="w-12 h-12" />
</a>
<a
href="https://www.facebook.com/spaceyatech"
target="_blank"
rel="noopener noreferrer"
>
<img src={facebook} alt="facebook" className="w-12 h-12" />
</a>
</div>
</div> */}
</div>
</section>
);
Expand Down
54 changes: 27 additions & 27 deletions src/APP/pages/community/sections/gallerySection/GallerySection.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,30 @@
/* eslint-disable react/prop-types */
import React from "react";
import { LazyLoadImage } from "react-lazy-load-image-component";
import { Link } from "react-router-dom";
import {
galleryimage1,
galleryimage2,
galleryimage3,
galleryimage4,
galleryimage5,
galleryimage6,
galleryimage7,
galleryimage8,
galleryimage9,
} from "../../../../../assets/images/community";
// import {
// galleryimage1,
// galleryimage2,
// galleryimage3,
// galleryimage4,
// galleryimage5,
// galleryimage6,
// galleryimage7,
// galleryimage8,
// galleryimage9,
// } from "../../../../../assets/images/community";
import { arrowRight } from "../../../../../assets/images/icons";
import { LazyLoadImage } from "react-lazy-load-image-component";
import photosData from "../../../gallery/data";

const photos = [
{ image: galleryimage1 },
// { image: galleryimage2 },
// { image: galleryimage3 },
{ image: galleryimage4 },
{ image: galleryimage5 },
{ image: galleryimage6 },
{ image: galleryimage7 },
{ image: galleryimage8 },
];
// const photos = [
// { image: galleryimage1 },
// // { image: galleryimage2 },
// // { image: galleryimage3 },
// { image: galleryimage4 },
// { image: galleryimage5 },
// { image: galleryimage6 },
// { image: galleryimage7 },
// { image: galleryimage8 },
// ];
function GallerySection() {
return (
<div className="pb-10 sm:pb-24 text-center">
Expand All @@ -40,11 +40,11 @@ function GallerySection() {
<br /> moments
</h2>
<div className="overflow-x-auto flex gap-8 mt-10">
{photos.map((photo) => (
{photosData.slice(0, 6).map((photo) => (
<LazyLoadImage
key={crypto.randomUUID()}
src={photo.image}
alt="gallery"
src={photo.src}
alt={photo.alt}
className="block h-[530px] max-w-[384px] rounded-xl object-cover object-center"
/>
))}
Expand All @@ -60,7 +60,7 @@ function GallerySection() {
</span>
<LazyLoadImage
src={arrowRight}
alt="arrow-right"
alt="arrow right"
className="size-5"
/>
</div>
Expand Down
151 changes: 88 additions & 63 deletions src/APP/pages/gallery/GalleryPage.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,82 +1,107 @@
import React, { useState } from "react";
import { Link } from "react-router-dom";

import { arrowCircleLeft } from "../../../assets/images/icons";
import processPhotos from "../../../utilities/processPhotos";
import photosData from "./data";
import ImageCard from "./sections/ImageCard";
import processPhotos from "../../../utilities/processPhotos";

function GalleryPage() {
const [isActive, setIsActive] = useState(false);

const photos = processPhotos(photosData);

return (
<main className="max-w-[1440px] mx-auto flex flex-col gap-8 ">
<div className="flex flex-col gap-2 pt-2 px-5 md:px-10">
<Link
to="/community"
className="flex items-center gap-1 text-sm font-medium"
onMouseEnter={() => setIsActive(true)}
onMouseLeave={() => setIsActive(false)}
>
{isActive ? (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2.68281 10.4425L8.30781 16.0675C8.42509 16.1848 8.58415 16.2507 8.75 16.2507C8.91585 16.2507 9.07491 16.1848 9.19219 16.0675C9.30946 15.9503 9.37535 15.7912 9.37535 15.6253C9.37535 15.4595 9.30946 15.3004 9.19219 15.1832L4.63359 10.6253H16.875C17.0408 10.6253 17.1997 10.5595 17.3169 10.4423C17.4342 10.3251 17.5 10.1661 17.5 10.0003C17.5 9.83459 17.4342 9.67562 17.3169 9.55841C17.1997 9.4412 17.0408 9.37535 16.875 9.37535H4.63359L9.19219 4.81753C9.30946 4.70026 9.37535 4.5412 9.37535 4.37535C9.37535 4.2095 9.30946 4.05044 9.19219 3.93316C9.07491 3.81588 8.91585 3.75 8.75 3.75C8.58415 3.75 8.42509 3.81588 8.30781 3.93316L2.68281 9.55816C2.6247 9.61621 2.5786 9.68514 2.54715 9.76101C2.5157 9.83688 2.49951 9.91821 2.49951 10.0003C2.49951 10.0825 2.5157 10.1638 2.54715 10.2397C2.5786 10.3156 2.6247 10.3845 2.68281 10.4425Z"
fill="#009975"
/>
</svg>
) : (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2.68281 10.4425L8.30781 16.0675C8.42509 16.1848 8.58415 16.2507 8.75 16.2507C8.91585 16.2507 9.07491 16.1848 9.19219 16.0675C9.30946 15.9503 9.37535 15.7912 9.37535 15.6253C9.37535 15.4595 9.30946 15.3004 9.19219 15.1832L4.63359 10.6253H16.875C17.0408 10.6253 17.1997 10.5595 17.3169 10.4423C17.4342 10.3251 17.5 10.1661 17.5 10.0003C17.5 9.83459 17.4342 9.67562 17.3169 9.55841C17.1997 9.4412 17.0408 9.37535 16.875 9.37535H4.63359L9.19219 4.81753C9.30946 4.70026 9.37535 4.5412 9.37535 4.37535C9.37535 4.2095 9.30946 4.05044 9.19219 3.93316C9.07491 3.81588 8.91585 3.75 8.75 3.75C8.58415 3.75 8.42509 3.81588 8.30781 3.93316L2.68281 9.55816C2.6247 9.61621 2.5786 9.68514 2.54715 9.76101C2.5157 9.83688 2.49951 9.91821 2.49951 10.0003C2.49951 10.0825 2.5157 10.1638 2.54715 10.2397C2.5786 10.3156 2.6247 10.3845 2.68281 10.4425Z"
fill="#323433"
/>
</svg>
)}

<span
className={`${
isActive ? "text-[#009975]" : "text-black"
} text-base`}
<main className="bg-[#d9d9d9]/30 font-spaceGrotesk pb-12">
<div className="max-w-[1440px] mx-auto flex flex-col gap-8">
<div className="flex items-center justify-between pt-8">
<Link
to="/community"
className="border rounded-full bg-white p-1 w-fit"
>
BACK
</span>
</Link>

<div className="flex flex-col gap-3 items-center text-center mt-5 md:items-start md:text-left max-w-4xl">
<h3 className="text-3xl font-normal">SpaceYaTech Gallery</h3>
<div className="flex-center bg-green-light rounded-full px-3 py-1.5 gap-2">
<img src={arrowCircleLeft} alt="arrow-left" className="size-5" />
<span className="capitalize text-green-header text-sm font-semibold">
Go Back
</span>
</div>
</Link>

<p className="text-base font-normal text-[#323433]">
SpaceYaTech is a fast growing tech community born out of a need for
a space for young techies to find communities to help them
accelerate in their careers. The community targets all sectors in
the tech industry and provides online communities to network, learn
and grow for techies at all stages in their career.
</p>
<h1 className="text-base font-medium uppercase text-grey-neutral">
SpaceYaTech Gallery | Collection 2024
</h1>
</div>
</div>

{/* <div className="grid sm:grid-cols-2 md:grid-cols-3 gap-0 grid-flow-dense">
{photosData.map((photo) => (
<ImageCard key={photo.id} photo={photo} />
))}
</div> */}
{/* <div className="grid sm:grid-cols-2 md:grid-cols-3 gap-0 grid-flow-dense">
{photosData.map((photo) => (
<ImageCard key={photo.id} photo={photo} />
))}
</div> */}

{/* <div
className="grid grid-cols-4 grid-rows-3 gap-4 grid-flow-dense"
// style={{ gridAutoRows: "217px" }}
>
{photosData.map((photo, index) => {
let style = {};
switch (index % 7) {
case 0:
style = {
gridColumn: "span 2",
gridRow: "span 1",
};
break;
case 1:
case 2:
style = { gridColumn: "span 1", gridRow: "span 1" };
break;
case 3:
style = { gridColumn: "span 1", gridRow: "span 2" };
break;
case 4:
case 5:
style = { gridColumn: "span 1", gridRow: "span 1" };
break;
case 6:
style = { gridColumn: "span 2", gridRow: "span 2" };
break;
default:
break;
}
return <ImageCard key={photo.id} photo={photo} style={style} />;
})}
</div> */}

{/* <div
className="grid grid-cols-4 grid-rows-3 grid-flow-dense gap-4"
style={{ gridAutoRows: "108.5px" }}
>
<div className="col-span-2">
<ImageCard key={photosData[0].id} photo={photosData[0]} />
</div>
<div className="col-start-3">
<ImageCard key={photosData[1].id} photo={photosData[1]} />
</div>
<div className="col-start-4">
<ImageCard key={photosData[2].id} photo={photosData[2]} />
</div>
<div className="row-span-2 row-start-2">
<ImageCard key={photosData[3].id} photo={photosData[3]} />
</div>
<div className="row-start-2">
<ImageCard key={photosData[4].id} photo={photosData[4]} />
</div>
<div className="col-start-2 row-start-3">
<ImageCard key={photosData[5].id} photo={photosData[5]} />
</div>
<div className="col-span-2 row-span-2 col-start-3 row-start-2">
<ImageCard key={photosData[6].id} photo={photosData[6]} />
</div>
</div> */}

<div className="overflow-y-auto h-full">
<ImageCard photos={photos} />
{/* Gallery library */}
<div className="overflow-y-auto h-full">
<ImageCard photos={photos} />
</div>
</div>
</main>
);
Expand Down
Loading

0 comments on commit 5afe5ef

Please sign in to comment.