Skip to content

Commit

Permalink
feat : added projects and events page components
Browse files Browse the repository at this point in the history
  • Loading branch information
@OMGATE23
OMGATE23 committed Jul 7, 2023
1 parent a3cad89 commit ddc3113
Show file tree
Hide file tree
Showing 7 changed files with 229 additions and 348 deletions.
250 changes: 80 additions & 170 deletions src/components/DisplayProjectsAndEvents/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
import React, { useEffect, useState } from 'react';
import './styles.css';

interface DisplayProps {
type: 'projects' | 'events';
}


interface Event {
name: string;
Expand All @@ -16,6 +13,11 @@ interface Project {
stars: number;
}

interface DisplayProps {
type: 'projects' | 'events';
filteredList : Event[] | Project[]
}

type EVENTS = Event[];
type PROJECTS = Project[];

Expand Down Expand Up @@ -48,40 +50,39 @@ const EVENTS = [

const PROJECTS = [
{
name: 'Project Name',
name: "Apple",
img: "url('./assets/placeholder-1.png')",
stars: 123,
stars: 121
},
{
name: 'Project Name',
name: "Banana",
img: "url('./assets/placeholder-2.png')",
stars: 123,
stars: 142
},
{
name: 'Project Name',
name: "Orange",
img: "url('./assets/placeholder-3.png')",
stars: 123,
stars: 223
},
{
name: 'Project Name',
name: "Watermelon",
img: "url('./assets/placeholder-4.png')",
stars: 123,
stars: 474
},
{
name: 'Project Name',
name: "Strawberry",
img: "url('./assets/placeholder-5.png')",
stars: 123,
stars: 105
},
{
name: 'Project Name',
name: "Pomogranate",
img: "url('./assets/placeholder-1.png')",
stars: 123,
},
stars: 216
}
];

type DisplayList = EVENTS | PROJECTS;

export default function DisplayProjectsAndEvents({ type }: DisplayProps) {
export default function DisplayProjectsAndEvents({ type , filteredList }: DisplayProps) {
const [displayList, setDisplayList] = useState<DisplayList>(() => {
if (type === 'projects') {
return PROJECTS;
Expand All @@ -92,178 +93,87 @@ export default function DisplayProjectsAndEvents({ type }: DisplayProps) {

return (
<div className='font-poppins text-sm mt-12 mb-32'>
<div className='flex flex-1'>
<div className='flex-cont'>
<div className='flex-child'>
<div className='display-image' style={{ backgroundImage: displayList[0].img }}></div>
<div className='display-name'>
{displayList[0].name}
{type === 'projects' && (
<span className='display-stars'>
<img src='./assets/github.svg' alt='' />
<img src='./assets/star.svg' alt='' />
{(displayList[0] as Project).stars}
</span>
)}
</div>
</div>
<div className='flex-child'>
<div className='display-image' style={{ backgroundImage: displayList[2].img }}></div>
<div className='display-name'>
{displayList[2].name}
{type === 'projects' && (
<span className='display-stars'>
<img src='./assets/github.svg' alt='' />
<img src='./assets/star.svg' alt='' />
{(displayList[0] as Project).stars}
</span>
)}
</div>
</div>
</div>
<div className='flex-cont'>
<div className='flex-child'>
<div className='display-image' style={{ backgroundImage: displayList[1].img }}></div>
<div className='display-name'>
{displayList[1].name}
{type === 'projects' && (
<span className='display-stars'>
<img src='./assets/github.svg' alt='' />
<img src='./assets/star.svg' alt='' />
{(displayList[0] as Project).stars}
</span>
)}
</div>
</div>
<div className='flex-child'>
<div className='display-image' style={{ backgroundImage: displayList[3].img }}></div>
<div className='display-name'>
{displayList[3].name}
{type === 'projects' && (
<span className='display-stars'>
<img src='./assets/github.svg' alt='' />
<img src='./assets/star.svg' alt='' />
{(displayList[0] as Project).stars}
</span>
)}
</div>
</div>
</div>
<div className='flex-cont'>
<div className='flex-child'>
<div className='display-image' style={{ backgroundImage: displayList[4].img }}></div>
<div className='display-name'>
{displayList[4].name}
{type === 'projects' && (
<span className='display-stars'>
<img src='./assets/github.svg' alt='' />
<img src='./assets/star.svg' alt='' />
{(displayList[0] as Project).stars}
</span>
)}
</div>
</div>
<div className='flex-child'>
<div className='display-image' style={{ backgroundImage: displayList[5].img }}></div>
<div className='display-name'>
{displayList[5].name}
{type === 'projects' && (
<span className='display-stars'>
<img src='./assets/github.svg' alt='' />
<img src='./assets/star.svg' alt='' />
{(displayList[0] as Project).stars}
</span>
)}
</div>
</div>
</div>
</div>
<div>
<div className='flex flex-2 '>
<div className='flex-cont'>
<div className='flex-child'>
<div className='display-image' style={{ backgroundImage: displayList[0].img }}></div>
<div className='display-name'>
{displayList[0].name}
<div className="main-grid w-[80vw] h-[90vh] my-10 mx-auto grid ml:grid-cols-4 ml:grid-rows-3 grid-cols-2 grid-rows-[repeat(20_,_minmax(0,_1fr))] justify-items-center gap-4">
{(filteredList.length > 0) && <div className="one flex flex-col justify-center w-full h-full ml:col-start-1 ml:col-end-2 ml:row-start-2 ml:row-end-3 col-start-1 col-end-2 row-start-1 row-end-7">
<div className="image w-full h-[90%] bg-cover bg-center rounded-lg" style={{ backgroundImage: filteredList[0].img }} ></div>
<div className="name h-fit">
{filteredList[0].name}
{type === 'projects' && (
<span className='display-stars'>
<img src='./assets/github.svg' alt='' />
<img src='./assets/star.svg' alt='' />
{(displayList[0] as Project).stars}
<span className='display-stars flex gap-1'>
<img className = 'w-[1rem]' src='./assets/github.svg' alt='' />
<img className = 'w-[1rem]' src='./assets/star.svg' alt='' />
{(filteredList[0] as Project).stars}
</span>
)}
</div>
</div>
<div className='flex-child'>
<div className='display-image' style={{ backgroundImage: displayList[1].img }}></div>
<div className='display-name'>
{displayList[1].name}
</div>
</div>}
{filteredList.length > 1 && <div className="two flex flex-col justify-center w-full h-full ml:col-span-2 ml:row-start-1 ml:row-end-3 col-start-2 col-end-[-1] row-start-1 row-end-6">
<div className="image w-full h-[90%] bg-cover bg-center rounded-lg" style={{ backgroundImage: filteredList[1].img }} ></div>
<div className="name h-fit">
{filteredList[1].name}
{type === 'projects' && (
<span className='display-stars'>
<img src='./assets/github.svg' alt='' />
<img src='./assets/star.svg' alt='' />
{(displayList[0] as Project).stars}
<span className='display-stars flex gap-1'>
<img className = 'w-[1rem]' src='./assets/github.svg' alt='' />
<img className = 'w-[1rem]' src='./assets/star.svg' alt='' />
{(filteredList[1] as Project).stars}
</span>
)}
</div>
</div>
<div className='flex-child'>
<div className='display-image' style={{ backgroundImage: displayList[2].img }}></div>
<div className='display-name'>
{displayList[2].name}
</div>
</div>}
{filteredList.length > 2 &&<div className="three flex flex-col justify-center w-full h-full ml:col-start-4 ml:col-end-[-1] ml:row-start-1 ml:row-end-2 col-start-1 col-end-2 row-start-7 row-end-[13]">
<div className="image w-full h-[90%] bg-cover bg-center rounded-lg" style={{ backgroundImage: filteredList[2].img }} ></div>
<div className="name h-fit">
{filteredList[2].name}
{type === 'projects' && (
<span className='display-stars'>
<img src='./assets/github.svg' alt='' />
<img src='./assets/star.svg' alt='' />
{(displayList[0] as Project).stars}
<span className='display-stars flex gap-1'>
<img className = 'w-[1rem]' src='./assets/github.svg' alt='' />
<img className = 'w-[1rem]' src='./assets/star.svg' alt='' />
{(filteredList[2] as Project).stars}
</span>
)}
</div>
</div>
</div>
<div className='flex-cont'>
<div className='flex-child'>
<div className='display-image' style={{ backgroundImage: displayList[3].img }}></div>
<div className='display-name'>
{displayList[3].name}
</div>}
{filteredList.length >3 && <div className="four flex flex-col justify-center w-full h-full ml:row-start-3 ml:row-end-[-1] ml:col-start-1 ml:col-end-2 col-start-2 col-end-[-1] row-start-6 row-end-[14]">
<div className="image w-full h-[90%] bg-cover bg-center rounded-lg" style={{ backgroundImage: filteredList[3].img }} ></div>
<div className="name h-fit">
{filteredList[3].name}
{type === 'projects' && (
<span className='display-stars'>
<img src='./assets/github.svg' alt='' />
<img src='./assets/star.svg' alt='' />
{(displayList[0] as Project).stars}
<span className='display-stars flex gap-1'>
<img className = 'w-[1rem]' src='./assets/github.svg' alt='' />
<img className = 'w-[1rem]' src='./assets/star.svg' alt='' />
{(filteredList[3] as Project).stars}
</span>
)}
</div>
</div>
<div className='flex-child'>
<div className='display-image' style={{ backgroundImage: displayList[4].img }}></div>
<div className='display-name'>
{displayList[4].name}
</div>
</div>}
{filteredList.length > 4 && <div className="five flex flex-col justify-center w-full h-full ml:col-start-2 ml:col-end-4 ml:row-start-3 ml:row-end-[-1] col-start-1 col-end-2 row-start-[13] row-end-[-1]">
<div className="image w-full h-[90%] bg-cover bg-center rounded-lg" style={{ backgroundImage: filteredList[4].img }} ></div>
<div className="name h-fit">
{filteredList[4].name}
{type === 'projects' && (
<span className='display-stars'>
<img src='./assets/github.svg' alt='' />
<img src='./assets/star.svg' alt='' />
{(displayList[0] as Project).stars}
<span className='display-stars flex gap-1'>
<img className = 'w-[1rem]' src='./assets/github.svg' alt='' />
<img className = 'w-[1rem]' src='./assets/star.svg' alt='' />
{(filteredList[4] as Project).stars}
</span>
)}
</div>
</div>
<div className='flex-child'>
<div className='display-image' style={{ backgroundImage: displayList[5].img }}></div>
<div className='display-name'>
{displayList[5].name}
</div>
</div>}
{filteredList.length > 5 && <div className="six flex flex-col justify-center w-full h-full ml:row-start-2 ml:row-end-[-1] ml:col-start-4 col-start-2 col-end-[-1] row-start-[14] row-end-[-1]">
<div className="image w-full h-[90%] bg-cover bg-center rounded-lg" style={{ backgroundImage: filteredList[5].img }} ></div>
<div className="name h-fit">
{filteredList[5].name}
{type === 'projects' && (
<span className='display-stars'>
<img src='./assets/github.svg' alt='' />
<img src='./assets/star.svg' alt='' />
{(displayList[0] as Project).stars}
<span className='display-stars flex gap-1'>
<img className = 'w-[1rem]' src='./assets/github.svg' alt='' />
<img className = 'w-[1rem]' src='./assets/star.svg' alt='' />
{(filteredList[5] as Project).stars}
</span>
)}
</div>
</div>
</div>
</div>
</div>}
</div>

<a
className='flex items-center text-md px-6 py-4 rounded-full w-fit gap-2 justify-evenly mx-auto outline outline-2 '
href={`/${type}`}
Expand Down
Loading

0 comments on commit ddc3113

Please sign in to comment.