51 lines
2.3 KiB
TypeScript
51 lines
2.3 KiB
TypeScript
import {YogaPrice_Plain} from "@/types/generated-strapi-interfaces/api/yoga-price";
|
|
import YogaImageComponent from "@/components/yoga.image.component";
|
|
import {StrapiFile} from "@/types/types";
|
|
import strapiApi from "@/api/strapi/strapi-api";
|
|
|
|
export interface Props{
|
|
config: YogaPrice_Plain
|
|
}
|
|
|
|
export function PriceItemComponent({config: {header,option1,option2,price,icon, image,buttonText}} : Props){
|
|
// there are some issues with the strapi generated types
|
|
const iconFile: StrapiFile = icon as StrapiFile;
|
|
const imageFile: StrapiFile = image as StrapiFile;
|
|
console.info("image:",strapiApi.getImageUrl(imageFile?.url));
|
|
return (
|
|
<div className="col-lg-4 col-md-4 col-sm-6 col-xs-12">
|
|
<div className="pricing_plans_box_content">
|
|
<div className="pricing_plans_box_upper_portion">
|
|
<figure className="pricing_plans_image mb-0">
|
|
<YogaImageComponent src={strapiApi.getImageUrl(imageFile?.url)} alt="" className="img-fluid"/>
|
|
</figure>
|
|
<div className="pricing_plans_box_image_content">
|
|
<figure className="mb-0">
|
|
<YogaImageComponent src={strapiApi.getImageUrl(iconFile?.url)} alt=""
|
|
className="img-fluid"/>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
<div className="pricing_plans_box_lower_portion">
|
|
<h3>{header}</h3>
|
|
<ul className="list-unstyled">
|
|
<li>
|
|
<i className="fa-solid fa-check" aria-hidden="true"></i>{option1}
|
|
</li>
|
|
<li>
|
|
<i className="fa-solid fa-check" aria-hidden="true"></i>{option2}
|
|
</li>
|
|
</ul>
|
|
<div className="pricing_plans_span_wrapper">
|
|
<span className="price">{price} FT</span>
|
|
<span className="per_month">/per month</span>
|
|
</div>
|
|
<div className="btn_wrapper">
|
|
<a className="enroll_now_btn text-decoration-none" href="/pricing.html">{buttonText}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|