Image in the podcast card will only hit a height of 232px now to dress it up. Background of the card is on the outer div.
This commit is contained in:
parent
59b676895d
commit
1e13484342
@ -18,12 +18,12 @@ export default function PodcastCard({
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-full min-h-[150px] shadow-md rounded-sm overflow-hidden flex m-4 mb-1">
|
<div className="w-full min-h-[150px] shadow-md rounded-sm overflow-hidden flex m-4 mb-1 bg-purple-200">
|
||||||
<div className="w-[150px] h-full bg-purple-100 flex-shrink-0 relative">
|
<div className="w-[150px] h-full max-h-[232px] bg-purple-100 flex-shrink-0 relative">
|
||||||
<Image unoptimized src={imageUrl} alt={title ?? ''} layout="fill" objectFit="contain" />
|
<Image unoptimized src={imageUrl} alt={title ?? ''} layout="fill" objectFit="contain" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="p-4 flex-grow flex flex-col bg-purple-200">
|
<div className="p-4 flex-grow flex flex-col">
|
||||||
<h2 className="text-lg font-bold text-gray-800">{title}</h2>
|
<h2 className="text-lg font-bold text-gray-800">{title}</h2>
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<div className={`text-sm text-gray-600 overflow-hidden transition-all duration-300 whitespace-pre-wrap ${descriptionExpanded ? 'max-h-full' : 'max-h-[60px]'}`}>
|
<div className={`text-sm text-gray-600 overflow-hidden transition-all duration-300 whitespace-pre-wrap ${descriptionExpanded ? 'max-h-full' : 'max-h-[60px]'}`}>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user