Skip to content

Commit

Permalink
chore : formatted code
Browse files Browse the repository at this point in the history
  • Loading branch information
@OMGATE23
OMGATE23 committed Jul 17, 2023
1 parent c873362 commit 0c3930b
Show file tree
Hide file tree
Showing 9 changed files with 302 additions and 145 deletions.
208 changes: 118 additions & 90 deletions src/components/DisplayProjectsAndEvents/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import React, { useEffect, useState } from 'react';



interface Event {
name: string;
img: string;
Expand All @@ -15,7 +13,7 @@ interface Project {

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

type EVENTS = Event[];
Expand Down Expand Up @@ -50,39 +48,39 @@ const EVENTS = [

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

type DisplayList = EVENTS | PROJECTS;
export default function DisplayProjectsAndEvents({ type , filteredList }: DisplayProps) {
export default function DisplayProjectsAndEvents({ type, filteredList }: DisplayProps) {
const [displayList, setDisplayList] = useState<DisplayList>(() => {
if (type === 'projects') {
return PROJECTS;
Expand All @@ -93,85 +91,115 @@ export default function DisplayProjectsAndEvents({ type , filteredList }: Displa

return (
<div className='font-poppins text-sm mt-12 mb-32'>
<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 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 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 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>}
{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 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>
)}
)}
{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 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>}
{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 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>
)}
)}
{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 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>}
{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 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>
)}
)}
{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 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>}
{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 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>
)}
)}
{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 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>}
{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 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>
)}
)}
{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 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>

<a
Expand Down
26 changes: 13 additions & 13 deletions src/components/ExploreProjects/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,35 +4,35 @@ import DisplayProjectsAndEvents from '../DisplayProjectsAndEvents';

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

export function ExploreProjects() {
Expand Down
Loading

0 comments on commit 0c3930b

Please sign in to comment.