104 lines
3.4 KiB
TypeScript
104 lines
3.4 KiB
TypeScript
// import { height } from 'components/OpenGraphImage'
|
|
import Image from 'next/image'
|
|
import React, { useEffect, useState } from 'react'
|
|
|
|
export default function CardContent({ props }) {
|
|
let { title, text, url } = props
|
|
|
|
//console.log('urlnya', url)
|
|
|
|
return (
|
|
<div className="p-0 sm:pt-10">
|
|
<div className="container pb-10 pt-10 sm:pb-10 sm:pt-0">
|
|
<h1 className="text-center text-3xl font-semibold leading-tight text-yellow-600 sm:text-4xl">
|
|
{title}
|
|
</h1>
|
|
</div>
|
|
<div className="container overflow-hidden rounded-md border bg-stone-50 p-0">
|
|
<div className="row g-0">
|
|
{/* <div className="col-12">
|
|
<div className="pb-10">
|
|
<h1 className="text-center text-3xl font-semibold leading-tight text-yellow-600 sm:text-4xl">
|
|
{title}
|
|
</h1>
|
|
</div>
|
|
</div> */}
|
|
<div className="col-12 p-0 md:col-6 sm:pr-5">
|
|
<div>
|
|
{(function () {
|
|
if (Array.isArray(url)) {
|
|
if (url.length > 0) {
|
|
return (
|
|
// <div></div>
|
|
<Image
|
|
width={1000}
|
|
height={1000}
|
|
className="mx-auto h-full w-full p-0 sm:h-auto sm:w-full"
|
|
src={url[0]['asset']}
|
|
alt={url[0]['alt']}
|
|
objectFit="cover"
|
|
/>
|
|
)
|
|
} else {
|
|
return <></>
|
|
}
|
|
} else {
|
|
return (
|
|
<>
|
|
<Image
|
|
width={1000}
|
|
height={1000}
|
|
className="mx-auto h-full w-full p-0 sm:h-auto sm:w-full"
|
|
src={url}
|
|
alt={url[0]['alt']}
|
|
objectFit="cover"
|
|
/>
|
|
</>
|
|
)
|
|
}
|
|
})()}
|
|
</div>
|
|
</div>
|
|
<div className="sm:col-12 md:col-6">
|
|
<div className="p-3">
|
|
{(function () {
|
|
if (Array.isArray(text)) {
|
|
return text.map((content, i) => {
|
|
if (i == 0 || i == 1) {
|
|
return (
|
|
<p
|
|
key={i}
|
|
className="p-5 font-sans text-base font-light"
|
|
>
|
|
{content}
|
|
</p>
|
|
)
|
|
} else {
|
|
return (
|
|
<p
|
|
key={i}
|
|
className="pb-5 font-sans font-light"
|
|
style={{ display: 'none' }}
|
|
>
|
|
{content}
|
|
</p>
|
|
)
|
|
}
|
|
})
|
|
} else {
|
|
return <p className="pb-5 font-sans font-light">{text}</p>
|
|
}
|
|
})()}
|
|
{/* <button className="readmore font-mono text-xs text-yellow-600 hover:text-stone-900 hover:underline">
|
|
Read More
|
|
</button> */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export {}
|