47 lines
2.0 KiB
JavaScript
47 lines
2.0 KiB
JavaScript
import CustomLoading from '@/app/component/loading/Custom'
|
|
import MultilineLoading from '@/app/component/loading/Multiline'
|
|
import Image from 'next/image'
|
|
import React from 'react'
|
|
|
|
function Caption({ data, loading }) {
|
|
return (
|
|
<>
|
|
<CustomLoading loading={loading} width='full' height={500}>
|
|
<Image
|
|
className="rounded-[8px] overflow-hidden w-full"
|
|
src={data.cover_first}
|
|
alt="cover-blog"
|
|
height={570}
|
|
width={808}
|
|
/>
|
|
</CustomLoading>
|
|
<div className={loading ? 'my-4' : ''}>
|
|
<MultilineLoading loading={loading} width='full' height={18} line={20}>
|
|
<div
|
|
className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
|
|
dangerouslySetInnerHTML={{ __html: data.caption }}
|
|
/>
|
|
</MultilineLoading>
|
|
</div>
|
|
<CustomLoading loading={loading} width='full' height={500}>
|
|
<Image
|
|
className="rounded-[8px] overflow-hidden w-full"
|
|
src={data.cover_second}
|
|
alt="cover-blog"
|
|
height={570}
|
|
width={808}
|
|
/>
|
|
</CustomLoading>
|
|
<div className={loading ? 'my-4' : ''}>
|
|
<MultilineLoading loading={loading} width='full' height={18} line={20}>
|
|
<div
|
|
className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
|
|
dangerouslySetInnerHTML={{ __html: data.caption }}
|
|
/>
|
|
</MultilineLoading>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default Caption |