rschneider/yogastic
1
0
Fork 0
Code Issues 28 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

convert about types from component to collection-type

Browse Source
This commit is contained in:
Schneider Roland
2025-01-19 21:57:33 +01:00
parent 741dd19588
commit c706a4c7d2
80 changed files with 2428 additions and 630 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
yoga-app/src/components/about.us.component.tsx
View File

@@ -1,21 +1,23 @@
import YogaImageComponent from "@/components/yoga.image.component";
import {
YogaAboutUsComponent,
YogaAboutUsComponent_Plain
} from "@/types/generated-strapi-interfaces/api/yoga-about-us-component";
import {StrapiFile} from "@/types/types";
import strapiApi from "@/app/api/strapi/strapi-api";
export interface Props{
title: string;
header: string;
description: string;
content: string;
buttonText: string,
buttonUrl: string
data: YogaAboutUsComponent_Plain
}
const AboutUsComponent = ({title,header,description,content,buttonText,buttonUrl}: Props) =>{
const AboutUsComponent = ( {data: {title,header,description,content,buttonText,buttonLink, image}}: Props) =>{
const fileImage = image as StrapiFile;
return (
<section className="aboutus_section">
<div className="container">
<div className="row">
<div className="col-lg-7 col-md-7 col-sm-12 col-xs-12">
<div className="aboutus_image">
<figure className="mb-0"><YogaImageComponent src="/assets/images/aboutus_image.png" alt="" className="img-fluid"/></figure>
<figure className="mb-0"><YogaImageComponent src={strapiApi.getImageUrl(fileImage.url)} alt="" className="img-fluid"/></figure>
</div>
<figure className="aboutus_top_shape left_shape mb-0">
<YogaImageComponent src="/assets/images/aboutus_top_shape.png" alt="" className="img-fluid"/>
@@ -34,7 +36,7 @@ const AboutUsComponent = ({title,header,description,content,buttonText,buttonUrl
<figure className="mb-0 purple_line"><YogaImageComponent src="/assets/images/aboutus_line.png" alt="" className="img-fluid" /></figure>
</div>
<div className="btn_wrapper">
<a href={buttonUrl} className="text-decoration-none get_started_btn">{buttonText}</a>
<a href={buttonLink} className="text-decoration-none get_started_btn">{buttonText}</a>
</div>
</div>
</div>

23
yoga-app/src/components/contact.us.component.tsx
View File

@@ -1,39 +1,42 @@
import YogaImageComponent from "@/components/yoga.image.component";
import {YogaContactUs_Plain} from "@/types/generated-strapi-interfaces/api/yoga-contact-us";
const ContactUsComponent = () => {
export interface Props{
contactUs: YogaContactUs_Plain
}
const ContactUsComponent = ( { contactUs :{ header,firstName,lastName,phone,title,message,email,buttonText }}: Props) => {
return (
<section className="get_in_touch_section">
<div className="container">
<div className="row" data-aos="fade-up">
<div className="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div className="get_in_touch_content">
<h5>Get in touch</h5>
<h2>Get a Free Consultation Now</h2>
<h5>{title}</h5>
<h2>{header}</h2>
<form>
<div className="row">
<div className="col-lg-6 col-md-6 col-sm-6">
<div className="form-group mb-0">
<input type="text" name="fname" id="fname" className="form-control"
placeholder="First Name"/>
placeholder={firstName}/>
</div>
</div>
<div className="col-lg-6 col-md-6 col-sm-6">
<div className="form-group mb-0">
<input type="text" name="lname" id="lname"
className="form-control form_style" placeholder="Last Name"/>
className="form-control form_style" placeholder={lastName}/>
</div>
</div>
<div className="col-lg-6 col-md-6 col-sm-6">
<div className="form-group mb-0">
<input type="tel" name="phonenum" id="phonenum" className="form-control"
placeholder="Phone"/>
placeholder={phone}/>
</div>
</div>
<div className="col-lg-6 col-md-6 col-sm-6">
<div className="form-group mb-0">
<input type="email" name="emailaddrs" id="emailaddrs"
className="form-control form_style" placeholder="Email"/>
className="form-control form_style" placeholder={email}/>
</div>
</div>
</div>
@@ -41,12 +44,12 @@ const ContactUsComponent = () => {
<div className="col-lg-12">
<div className=" form-group mb-0">
<textarea rows={3} name="comment" id="msg" className="form-control"
placeholder="Message"></textarea>
placeholder={message}></textarea>
</div>
</div>
</div>
<div className="btn_wrapper">
<button type="submit" name="get_started" id="started">Get Started</button>
<button type="submit" name="get_started" id="started">{buttonText}</button>
</div>
</form>
</div>

65
yoga-app/src/components/our.specialities.component.tsx
View File

@@ -1,7 +1,24 @@
import YogaImageComponent from "@/components/yoga.image.component";
import {
OurSpecialitiesComponent_Plain
} from "@/types/generated-strapi-interfaces/components/yoga-site/OurSpecialitiesComponent";
import OurSpecialitiesItemComponent from "@/components/our.specialities.item.component";
import {YogaSpecialitiesComponent_Plain} from "@/types/generated-strapi-interfaces/api/yoga-specialities-component";
export interface Props{
config: YogaSpecialitiesComponent_Plain
}
const OurSpecialitiesComponent = () => {
const OurSpecialitiesComponent = ({ config: { title,header,description,
left1,
left2,
left3,
left4,
right1,
right2,
right3,
right4
} }: Props) => {
return (
<section className="our_specialties_section">
@@ -9,31 +26,19 @@ const OurSpecialitiesComponent = () => {
<div className="row">
<div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div className="our_specialties_heading_content">
<h5>Our Specialties</h5>
<h2>Why Choose Us</h2>
<p>Quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores nostrum exercitationem ullam corporis suscipit laboriosam</p>
<h5>{title}</h5>
<h2>{header}</h2>
<p>{description}</p>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-3 col-md-4 col-sm-6 col-xs-12" data-aos="fade-right">
<div className="specialties_content_wrapper">
<div className="specialties_content s1">
<p className="specialties_name">Vinyasa Yoga</p>
<p className="specialties_paragraph">Dolor reaellendus temorius maiores alia</p>
</div>
<div className="specialties_content s2">
<p className="specialties_name">Slow Yoga</p>
<p className="specialties_paragraph">Rabore et dolore maga eiusmo rute aliua</p>
</div>
<div className="specialties_content s3">
<p className="specialties_name">Intuitive Yoga</p>
<p className="specialties_paragraph">Earum rerum hic tene sapiente delectus</p>
</div>
<div className="specialties_content s4">
<p className="specialties_name">Aroma Yoga</p>
<p className="specialties_paragraph">Neque orro quisquam est raui dolorem</p>
</div>
{ left1 && <OurSpecialitiesItemComponent config={left1} order={1} /> }
{ left2 && <OurSpecialitiesItemComponent config={left2} order={2} /> }
{ left3 && <OurSpecialitiesItemComponent config={left3} order={3} /> }
{ left4 && <OurSpecialitiesItemComponent config={left4} order={4} /> }
<figure className="specialties_left_line mb-0">
<YogaImageComponent src="/assets/images/specialties_left_line.png" alt="" className="img-fluid" />
</figure>
@@ -46,22 +51,10 @@ const OurSpecialitiesComponent = () => {
</div>
<div className="col-lg-3 col-md-4 col-sm-6 col-xs-12" data-aos="fade-right">
<div className="specialties_content_wrapper">
<div className="specialties_content specialties_content2 s5">
<p className="specialties_name">Kundalini Yoga</p>
<p className="specialties_paragraph">Dolor reaellendus temorius maiores alia</p>
</div>
<div className="specialties_content specialties_content2 s6">
<p className="specialties_name">Bikram Yoga</p>
<p className="specialties_paragraph">Rabore et dolore mae eiusmo rute aliua</p>
</div>
<div className="specialties_content specialties_content2 s7">
<p className="specialties_name">Mindfulness Training</p>
<p className="specialties_paragraph">Earum rerum hic tene sapiente delectus</p>
</div>
<div className="specialties_content specialties_content2 s8">
<p className="specialties_name">Workout Routines</p>
<p className="specialties_paragraph">Neque orro quisquam est raui dolorem</p>
</div>
{ right1 && <OurSpecialitiesItemComponent config={right1} position={"right"} order={5} /> }
{ right2 && <OurSpecialitiesItemComponent config={right2} position={"right"} order={6} /> }
{ right3 && <OurSpecialitiesItemComponent config={right3} position={"right"} order={7} /> }
{ right4 && <OurSpecialitiesItemComponent config={right4} position={"right"} order={8} /> }
<figure className="specialties_right_line mb-0">
<YogaImageComponent src="/assets/images/specialties_right_line.png" alt="" className="img-fluid" />
</figure>

32
yoga-app/src/components/our.specialities.item.component.tsx Normal file
View File

@@ -0,0 +1,32 @@
import YogaImageComponent from "@/components/yoga.image.component";
import {
OurSpecialitiesComponent_Plain
} from "@/types/generated-strapi-interfaces/components/yoga-site/OurSpecialitiesComponent";
import {TitleDescription_Plain} from "@/types/generated-strapi-interfaces/components/shared/TitleDescription";
import clsx from "clsx";
export interface Props{
config: TitleDescription_Plain,
position?: 'left' | 'right';
order: number;
}
const OurSpecialitiesItemComponent = ({ position = "left",order, config: { title,description,
} }: Props) => {
const orderClass = "s"+order;
return (
<div className={clsx({
"specialties_content": true,
"specialties_content2": position == 'right',
[orderClass]: true
})}>
<p className="specialties_name">{title}</p>
<p className="specialties_paragraph">{description}</p>
</div>
);
}
export default OurSpecialitiesItemComponent;

50
yoga-app/src/components/price.item.component.tsx Normal file
View File

@@ -0,0 +1,50 @@
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 "@/app/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>
);
}

218
yoga-app/src/components/pricing.component.tsx
View File

@@ -1,121 +1,129 @@
import YogaImageComponent from "@/components/yoga.image.component";
import {YogaPriceComponent_Plain} from "@/types/generated-strapi-interfaces/api/yoga-price-component";
import {PriceItemComponent} from "@/components/price.item.component";
const PricingComponent = () => {
export interface Props{
config: YogaPriceComponent_Plain
}
const PricingComponent = ({config: { title,header,description,prices}}: Props) => {
return (
<section className="pricing_plans_section">
<div className="container">
<div className="row">
<div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div className="pricing_plans_content">
<h5>What We Offer</h5>
<h2>Our Pricing Plans</h2>
<p>Molestiae non recusandae itaque earum rerum hic teneaur a sapiente delectus, rae aut
reiciendis officia deserunt mollitia animi omnis dolor</p>
<h5>{title}</h5>
<h2>{header}</h2>
<p>{description}</p>
</div>
</div>
</div>
<div className="row" data-aos="fade-up">
<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="/assets/images/pricing_plan_1.png" alt="" className="img-fluid"/>
</figure>
<div className="pricing_plans_box_image_content">
<figure className="mb-0">
<YogaImageComponent src="/assets/images/pricing_plan_icon_1.png" alt="" className="img-fluid"/>
</figure>
</div>
</div>
<div className="pricing_plans_box_lower_portion">
<h3>Standard</h3>
<ul className="list-unstyled">
<li>
<i className="fa-solid fa-check" aria-hidden="true"></i>Pay as you go
</li>
<li>
<i className="fa-solid fa-check" aria-hidden="true"></i>Perfect for
non-residence
</li>
</ul>
<div className="pricing_plans_span_wrapper">
<span className="price">$30</span>
<span className="per_month">/per month</span>
</div>
<div className="btn_wrapper">
<a className="enroll_now_btn text-decoration-none" href="/pricing.html">Enroll
Now</a>
</div>
</div>
</div>
</div>
<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="/assets/images/pricing_plan_2.png" alt="" className="img-fluid"/>
</figure>
<div className="pricing_plans_box_image_content">
<figure className="mb-0">
<YogaImageComponent src="/assets/images/pricing_plan_icon_2.png" alt="" className="img-fluid"/>
</figure>
</div>
</div>
<div className="pricing_plans_box_lower_portion second_lower_portion">
<h3>Professional</h3>
<ul className="list-unstyled">
<li>
<i className="fa-solid fa-check" aria-hidden="true"></i>Short-term comitment
</li>
<li>
<i className="fa-solid fa-check" aria-hidden="true"></i>Online training for all
</li>
</ul>
<div className="pricing_plans_span_wrapper">
<span className="price">$120</span>
<span className="per_month">/per month</span>
</div>
<div className="btn_wrapper">
<a className="enroll_now_btn text-decoration-none" href="/pricing.html">Enroll
Now</a>
</div>
</div>
</div>
</div>
<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="/assets/images/pricing_plan_3.png" alt="" className="img-fluid"/>
</figure>
<div className="pricing_plans_box_image_content">
<figure className="mb-0">
<YogaImageComponent src="/assets/images/pricing_plan_icon_3.png" alt="" className="img-fluid"/>
</figure>
</div>
</div>
<div className="pricing_plans_box_lower_portion third_lower_portion">
<h3>Private</h3>
<ul className="list-unstyled">
<li>
<i className="fa-solid fa-check" aria-hidden="true"></i>Long-term comitment
</li>
<li>
<i className="fa-solid fa-check" aria-hidden="true"></i>24/7 Available
</li>
</ul>
<div className="pricing_plans_span_wrapper">
<span className="price">$250</span>
<span className="per_month">/per month</span>
</div>
<div className="btn_wrapper">
<a className="enroll_now_btn text-decoration-none" href="/pricing.html">Enroll
Now</a>
</div>
</div>
</div>
</div>
{
prices.map(value => <PriceItemComponent key={value.id} config={value} />)
}
{/* <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="/assets/images/pricing_plan_1.png" alt="" className="img-fluid"/>*/}
{/* </figure>*/}
{/* <div className="pricing_plans_box_image_content">*/}
{/* <figure className="mb-0">*/}
{/* <YogaImageComponent src="/assets/images/pricing_plan_icon_1.png" alt="" className="img-fluid"/>*/}
{/* </figure>*/}
{/* </div>*/}
{/* </div>*/}
{/* <div className="pricing_plans_box_lower_portion">*/}
{/* <h3>Standard</h3>*/}
{/* <ul className="list-unstyled">*/}
{/* <li>*/}
{/* <i className="fa-solid fa-check" aria-hidden="true"></i>Pay as you go*/}
{/* </li>*/}
{/* <li>*/}
{/* <i className="fa-solid fa-check" aria-hidden="true"></i>Perfect for*/}
{/* non-residence*/}
{/* </li>*/}
{/* </ul>*/}
{/* <div className="pricing_plans_span_wrapper">*/}
{/* <span className="price">$30</span>*/}
{/* <span className="per_month">/per month</span>*/}
{/* </div>*/}
{/* <div className="btn_wrapper">*/}
{/* <a className="enroll_now_btn text-decoration-none" href="/pricing.html">Enroll*/}
{/* Now</a>*/}
{/* </div>*/}
{/* </div>*/}
{/* </div>*/}
{/* </div>*/}
{/* <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="/assets/images/pricing_plan_2.png" alt="" className="img-fluid"/>*/}
{/* </figure>*/}
{/* <div className="pricing_plans_box_image_content">*/}
{/* <figure className="mb-0">*/}
{/* <YogaImageComponent src="/assets/images/pricing_plan_icon_2.png" alt="" className="img-fluid"/>*/}
{/* </figure>*/}
{/* </div>*/}
{/* </div>*/}
{/* <div className="pricing_plans_box_lower_portion second_lower_portion">*/}
{/* <h3>Professional</h3>*/}
{/* <ul className="list-unstyled">*/}
{/* <li>*/}
{/* <i className="fa-solid fa-check" aria-hidden="true"></i>Short-term comitment*/}
{/* </li>*/}
{/* <li>*/}
{/* <i className="fa-solid fa-check" aria-hidden="true"></i>Online training for all*/}
{/* </li>*/}
{/* </ul>*/}
{/* <div className="pricing_plans_span_wrapper">*/}
{/* <span className="price">$120</span>*/}
{/* <span className="per_month">/per month</span>*/}
{/* </div>*/}
{/* <div className="btn_wrapper">*/}
{/* <a className="enroll_now_btn text-decoration-none" href="/pricing.html">Enroll*/}
{/* Now</a>*/}
{/* </div>*/}
{/* </div>*/}
{/* </div>*/}
{/* </div>*/}
{/* <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="/assets/images/pricing_plan_3.png" alt="" className="img-fluid"/>*/}
{/* </figure>*/}
{/* <div className="pricing_plans_box_image_content">*/}
{/* <figure className="mb-0">*/}
{/* <YogaImageComponent src="/assets/images/pricing_plan_icon_3.png" alt="" className="img-fluid"/>*/}
{/* </figure>*/}
{/* </div>*/}
{/* </div>*/}
{/* <div className="pricing_plans_box_lower_portion third_lower_portion">*/}
{/* <h3>Private</h3>*/}
{/* <ul className="list-unstyled">*/}
{/* <li>*/}
{/* <i className="fa-solid fa-check" aria-hidden="true"></i>Long-term comitment*/}
{/* </li>*/}
{/* <li>*/}
{/* <i className="fa-solid fa-check" aria-hidden="true"></i>24/7 Available*/}
{/* </li>*/}
{/* </ul>*/}
{/* <div className="pricing_plans_span_wrapper">*/}
{/* <span className="price">$250</span>*/}
{/* <span className="per_month">/per month</span>*/}
{/* </div>*/}
{/* <div className="btn_wrapper">*/}
{/* <a className="enroll_now_btn text-decoration-none" href="/pricing.html">Enroll*/}
{/* Now</a>*/}
{/* </div>*/}
{/* </div>*/}
{/* </div>*/}
{/* </div>*/}
</div>
</div>
</section>