59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||
|
|
import Link from "next/link"
|
||
|
|
|
||
|
|
export default function RoomCard({
|
||
|
|
title,
|
||
|
|
room,
|
||
|
|
image,
|
||
|
|
color,
|
||
|
|
}: {
|
||
|
|
title: string
|
||
|
|
room: string
|
||
|
|
image: any,
|
||
|
|
color: string
|
||
|
|
}) {
|
||
|
|
if(!image) return "No Image Available"
|
||
|
|
return <Link href={`/testb?room=${room}`}>
|
||
|
|
{image && <div
|
||
|
|
style={{
|
||
|
|
// minWidth: 500,
|
||
|
|
width: '100%',
|
||
|
|
height: 275,
|
||
|
|
overflow: 'hidden',
|
||
|
|
objectFit: 'cover',
|
||
|
|
objectPosition: 'center'
|
||
|
|
}}
|
||
|
|
className='relative opacity-70 hover:opacity-90'
|
||
|
|
>
|
||
|
|
|
||
|
|
<div className='text-2xl text-center w-full text-shadow-black text-shadow-2xs text-white bg-transparent absolute z-20 top-0'>{title}</div>
|
||
|
|
<img
|
||
|
|
width={'100%'}
|
||
|
|
height={275}
|
||
|
|
style={{
|
||
|
|
filter: 'grayscale(100%)',
|
||
|
|
position: 'relative',
|
||
|
|
overflow: 'hidden'
|
||
|
|
}}
|
||
|
|
src={image}
|
||
|
|
className='absolute top-0'
|
||
|
|
/>
|
||
|
|
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
backgroundColor: color,
|
||
|
|
opacity: '50%',
|
||
|
|
// backgroundColor: 'rgba(100,27,198,0.5',
|
||
|
|
// width: 500,
|
||
|
|
width: '100%',
|
||
|
|
height: 275
|
||
|
|
}}
|
||
|
|
className='absolute top-0 bottom-0 left-0 right-0'
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
</Link>
|
||
|
|
}
|