yogastic/yoga-app/src/components/our.services.item.component.tsx
2025-05-25 14:52:31 +02:00

43 lines
1.6 KiB
TypeScript

import YogaImageComponent from "@/components/yoga.image.component";
import {YogaSingleService_Plain} from "@/types/generated-strapi-interfaces/api/yoga-single-service";
import {StrapiFile} from "@/types/types";
import strapiApi from "@/api/strapi/strapi-api";
import styles from './our.services.item.component.module.css'
import Link from "next/link";
export interface Props {
config: YogaSingleService_Plain
}
const OurServiceItemComponent = ({config: {header,description,image,name}}: Props) => {
const imageFile: StrapiFile = image as StrapiFile;
if (!imageFile || !imageFile.url) {
return null
}
const path = '/services/' + name;
return (
<div className={styles.serviceSlide}>
{/*<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">*/}
<div className="services_box_content">
<div className="services_box_upper_portion">
<figure className="mb-0">
<YogaImageComponent src={strapiApi.getImageUrl(imageFile.url)} alt="" className="img-fluid"/>
</figure>
</div>
<div className="services_box_lower_portion">
<h3>{header}</h3>
<p>{description}</p>
<div className="btn_wrapper">
<Link href={path} className="text-decoration-none"><i
className="fa-solid fa-arrow-right" aria-hidden="true"></i></Link>
</div>
</div>
</div>
</div>
);
}
export default OurServiceItemComponent;