40 lines
1.5 KiB
Plaintext
40 lines
1.5 KiB
Plaintext
---
|
|
import { Icon } from "astro-icon/components";
|
|
|
|
const { props } = Astro.props;
|
|
const textColor = props.textColor || ''
|
|
|
|
const imageUrl = props.image || ''
|
|
//const bgClass = props.type === 'text'? `bg-[${props.bgColor}]` : `bg-[url(${props.image})] bg-cover`
|
|
---
|
|
{props.type !== 'imgText' && (
|
|
<div class="aspect-square overflow-hidden">
|
|
<div class={`flex flex-col justify-center h-full bg-[${props.bgColor}]`}>
|
|
{ props.type === 'text' && (
|
|
<div class="p-8 sm:p-16 md:p-8 xl:p-16 flex flex-col justify-between h-full">
|
|
<Icon name={props.icon} class={`text-8xl text-[${textColor}] hidden lg:block`} />
|
|
<p class={`text-[${textColor}]`}>{props.text}</p>
|
|
</div>
|
|
)}
|
|
{ props.type === 'image' && (
|
|
<div class="object-cover aspect-square flex">
|
|
<img class="w-full object-cover" src={props.image} alt="" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{ props.type === 'imgText' && (
|
|
<div class={`flex flex-col justify-between h-full bg-[${props.bgColor}]`}>
|
|
<div class="grid grid-cols-1 gap-0 p-8 font-bold">
|
|
<div class="px-12 py-10">
|
|
<Icon name={props.icon} class="text-3xl" />
|
|
<p class="font-primary text-xl">{props.text}</p>
|
|
</div>
|
|
<div class="object-cover aspect-square flex">
|
|
<img class="w-full h-auto object-cover" src={props.image} alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)} |