generated from dwd/boilarplate-remix-tailwind-antd
41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
let albumsData = [
|
|
{
|
|
id : "1",
|
|
type : "Art & Craft Album",
|
|
img : "/assets/athumbnail1.jpg",
|
|
url : "/albums/art-&-craft"
|
|
},
|
|
{
|
|
id : "2",
|
|
type : "GK & Group Activity",
|
|
img : "/assets/athumbnail2.jpg",
|
|
url : "/albums/gk-&-group-activity"
|
|
},
|
|
{
|
|
id : "3",
|
|
type : "Language & Maths",
|
|
img : "/assets/athumbnail3.jpg",
|
|
url : "/albums/language-&-maths"
|
|
}
|
|
]
|
|
|
|
|
|
export default function AlbumIndex(){
|
|
return(
|
|
<div>
|
|
<section className="container mx-auto px-4">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 p-8">
|
|
{
|
|
albumsData.map((data) => (
|
|
<a href={data.url} key={data.id} className="rounded-[10px] border-[1px] border-[#D4D4D4] relative inline-block">
|
|
<img className="w-full rounded-[10px]" src={data.img} alt="" />
|
|
<h2 className="absolute bottom-6 left-6 text-[24px] font-[700] text-[#FFF] underline">{data.type}</h2>
|
|
</a>
|
|
))
|
|
}
|
|
<div></div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
)
|
|
} |