xevion/xevion.dev
1
0
Fork 0
mirror of https://github.com/Xevion/xevion.dev.git synced 2025-12-10 06:09:16 -06:00
Code Issues Packages Projects Releases Wiki Activity

Refactor into ItemCard component for upcoming mobile-focus click

Browse Source
This commit is contained in:
Xevion
2022-12-24 12:21:20 -06:00
parent 58b27fe0d4
commit 4f289e5051
2 changed files with 33 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/ItemCard.tsx Normal file
View File

@@ -0,0 +1,31 @@
import Image from "next/image";
import {ArrowLongRightIcon} from "@heroicons/react/24/outline";
import React from "react";
type ItemCardProps = {
banner: string;
title: React.ReactNode;
description: React.ReactNode;
}
const ItemCard = ({banner, title, description}: ItemCardProps) => {
return <div className="item">
<Image fill src={banner}
alt={`Banner for ${title}`}
style={{objectFit: "cover"}}
/>
<div className="elements grid grid-cols-5 h-full">
<div className="col-span-4 md:col-span-3 z-30 drop-shadow-2xl p-0 md:p-3 pl-2 md:ml-4">
<div className="mt-1 text-xl md:mt-3 md:text-3xl">{title}</div>
<div className="mt-0 text-sm md:mt-1.5 md:text-xl ">{description}</div>
</div>
<div className="hidden md:block"/>
<div className="col-span-1 w-full h-full flex align-center justify-center text-zinc-50 pr-10">
<ArrowLongRightIcon
className="max-w-full stroke-1 text-white z-10 aspect-square w-50"/>
</div>
</div>
</div>
}
export default ItemCard;

21
src/pages/index.tsx
View File

@@ -1,8 +1,7 @@
import {type NextPage} from "next"; import {type NextPage} from "next";
import Head from "next/head"; import Head from "next/head";
import Image from "next/image";
import {ArrowLongRightIcon} from "@heroicons/react/24/outline";
import React from "react"; import React from "react";
import ItemCard from "../components/ItemCard";
interface Project { interface Project {
title: string; title: string;
@@ -42,23 +41,7 @@ const Home: NextPage = () => {
<div className="flex h-full m-1 flex-col justify-start gap-y-4"> <div className="flex h-full m-1 flex-col justify-start gap-y-4">
{ {
projects.map((project, index) => projects.map((project, index) =>
<div key={index} className="item"> <ItemCard key={index} {...project} />
<Image fill src={project.banner}
alt={`Banner for ${project.title}`}
style={{objectFit: "cover"}}
/>
<div className="elements grid grid-cols-5 h-full">
<div className="col-span-4 md:col-span-3 z-30 drop-shadow-2xl p-0 md:p-3 pl-2 md:ml-4">
<div className="mt-1 text-xl md:mt-3 md:text-3xl">{project.title}</div>
<div className="mt-0 text-sm md:mt-1.5 md:text-xl ">{project.description}</div>
</div>
<div className="hidden md:block"/>
<div className="col-span-1 w-full h-full flex align-center justify-center text-zinc-50 pr-10">
<ArrowLongRightIcon
className="max-w-full stroke-1 text-white z-10 aspect-square w-50"/>
</div>
</div>
</div>
) )
} }
</div> </div>