[yoga-15] improve service list rendering
This commit is contained in:
Schneider Roland
parent
6b316ec1aa
commit
c0ca7108c7
@ -73,8 +73,8 @@ const generateIcons = ( ): IconDescriptor[] => {
|
||||
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Yoga App",
|
||||
description: "Yoga App",
|
||||
title: "Reverseyoga",
|
||||
description: "Reverseyoga - Yoga mindenkinek",
|
||||
icons: generateIcons(),
|
||||
manifest: "./assets/images/favicon/manifest.json",
|
||||
other: {
|
||||
|
||||
@ -20,9 +20,9 @@ export default async function Services() {
|
||||
<>
|
||||
<SubHeaderComponent header={{header1:header,description}} common={common}/>
|
||||
{
|
||||
services && services.length > 0 && services.map( singleService => {
|
||||
services && services.length > 0 && services.map( (singleService,index) => {
|
||||
return (
|
||||
<SingleServiceComponent key={singleService.id} config={singleService} />
|
||||
<SingleServiceComponent key={singleService.id} config={singleService} index={index}/>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
35
yoga-app/src/components/block.with.image.component.tsx
Normal file
35
yoga-app/src/components/block.with.image.component.tsx
Normal file
@ -0,0 +1,35 @@
|
||||
import {ButtonConfig, ImageConfig} from "@/types/types";
|
||||
import {BlocksContent} from "@strapi/blocks-react-renderer";
|
||||
import BlockWithRightImage from "@/components/block.with.right.image.component";
|
||||
import BlockWithLeftImage from "@/components/block.with.left.image.component";
|
||||
|
||||
|
||||
export interface BlockWithImageComponentProps {
|
||||
id: number;
|
||||
title?: string;
|
||||
header?: string;
|
||||
block: BlocksContent;
|
||||
image: ImageConfig;
|
||||
button?: ButtonConfig;
|
||||
}
|
||||
|
||||
export default function BlockWithImageComponent({
|
||||
block,
|
||||
image,
|
||||
id,
|
||||
title,
|
||||
header,
|
||||
button
|
||||
}: BlockWithImageComponentProps) {
|
||||
return (
|
||||
<>
|
||||
{image?.position == 'Right' && <BlockWithRightImage
|
||||
block={block} image={image} id={id} title={title}
|
||||
header={header}
|
||||
button={button}/>}
|
||||
{image?.position == 'Left' && <BlockWithLeftImage block={block} image={image} id={id} title={title}
|
||||
header={header}
|
||||
button={button}/>}
|
||||
</>
|
||||
);
|
||||
}
|
||||
42
yoga-app/src/components/block.with.left.image.component.tsx
Normal file
42
yoga-app/src/components/block.with.left.image.component.tsx
Normal file
@ -0,0 +1,42 @@
|
||||
import YogaImageComponent from "@/components/yoga.image.component";
|
||||
import NextBlocksRenderer from "@/components/next.blocks.renderer";
|
||||
import {BlockWithImageComponentProps} from "@/components/block.with.image.component";
|
||||
|
||||
|
||||
|
||||
export default function BlockWithLeftImage ( {
|
||||
title,header,image,block,button
|
||||
} : BlockWithImageComponentProps){
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<section className="vision_section">
|
||||
<div className="container">
|
||||
<div className="vision_box">
|
||||
<div className="row">
|
||||
<div className="col-lg-6 col-md-6 col-sm-12 col-xs-12">
|
||||
<div className="vision_image">
|
||||
<figure className="mb-0"><YogaImageComponent src={image.url} alt="" className="img-fluid" /></figure>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 col-md-6 col-sm-12 col-xs-12" data-aos="fade-up">
|
||||
<div className="vision_content">
|
||||
<h5>{title}</h5>
|
||||
<h2>{header}</h2>
|
||||
<NextBlocksRenderer content={ block } />
|
||||
<div className="btn_wrapper">
|
||||
{button && <a href={button.link} className="text-decoration-none read_more_btn">{button.label}</a>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure className="vision_left_shape left_shape mb-0">
|
||||
<YogaImageComponent src="./assets/images/our_vision_shape.png" alt="" className="img-fluid" />
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
)
|
||||
}
|
||||
40
yoga-app/src/components/block.with.right.image.component.tsx
Normal file
40
yoga-app/src/components/block.with.right.image.component.tsx
Normal file
@ -0,0 +1,40 @@
|
||||
import YogaImageComponent from "@/components/yoga.image.component";
|
||||
import {BlockWithImageComponentProps} from "@/components/block.with.image.component";
|
||||
import NextBlocksRenderer from "@/components/next.blocks.renderer";
|
||||
|
||||
export default function BlockWithRightImage ({
|
||||
title,header, block,button, image: {
|
||||
url,
|
||||
} ,
|
||||
}: BlockWithImageComponentProps){
|
||||
|
||||
|
||||
return (
|
||||
<section className="mission_section">
|
||||
<div className="container">
|
||||
<div className="mission_box">
|
||||
<div className="row">
|
||||
<div className="col-lg-6 col-md-6 col-sm-12 col-xs-12" data-aos="fade-up">
|
||||
<div className="mission_content">
|
||||
{title && <h5>{title}</h5>}
|
||||
{header && <h2>{header}</h2>}
|
||||
<NextBlocksRenderer content={ block } />
|
||||
<div className="btn_wrapper">
|
||||
{button && <a href={button.link} className="text-decoration-none read_more_btn">{button.label}</a>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 col-md-6 col-sm-12 col-xs-12">
|
||||
<div className="mission_image">
|
||||
<figure className="mb-0"><YogaImageComponent src={url} alt="" className="img-fluid" /></figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure className="mission_right_shape right_shape mb-0">
|
||||
<YogaImageComponent src="./assets/images/our_mission_shape.png" alt="" className="img-fluid" />
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@ -1,31 +1,26 @@
|
||||
import {YogaSingleService_Plain} from "@/types/generated-strapi-interfaces/api/yoga-single-service";
|
||||
import clsx from "clsx";
|
||||
import NextBlocksRenderer from "@/components/next.blocks.renderer";
|
||||
import {BlocksContent} from "@strapi/blocks-react-renderer";
|
||||
import React from "react";
|
||||
import BlockWithImageComponent from "@/components/block.with.image.component";
|
||||
import {ImagePosition, StrapiFile} from "@/types/types";
|
||||
import strapiApi from "@/api/strapi/strapi-api";
|
||||
|
||||
|
||||
export interface Props {
|
||||
config: YogaSingleService_Plain
|
||||
config: YogaSingleService_Plain,
|
||||
index: number
|
||||
}
|
||||
|
||||
const SingleService = ({config}: Props) => {
|
||||
if (!config || !config.article) {
|
||||
const SingleService = ({config,index}: Props) => {
|
||||
if (!config || !config.article || !config.image) {
|
||||
return null; // or some fallback UI
|
||||
}
|
||||
|
||||
const {article, image, id, header } = config;
|
||||
const strapiFile = image as StrapiFile;
|
||||
const imageUrl = strapiApi.getImageUrl(strapiFile?.url);
|
||||
|
||||
return (
|
||||
<section id={config.name+""} className={clsx('mb-3')}>
|
||||
<div className="container">
|
||||
<div className={"row"}>
|
||||
<div className={"col-lg-12 col-md-12 col-sm-12 col-xs-12"}>
|
||||
<NextBlocksRenderer
|
||||
content={config.article as BlocksContent}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<BlockWithImageComponent id={id} block={article} image={{ position: index %2 ? ImagePosition.Left : ImagePosition.Right, url:imageUrl}} header={header} />
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
export interface StrapiFile{
|
||||
"id": string,
|
||||
"documentId": string,
|
||||
@ -5,3 +6,23 @@ export interface StrapiFile{
|
||||
"mime": string,
|
||||
"url": string
|
||||
}
|
||||
|
||||
export enum ImagePosition {
|
||||
Left = 'Left',
|
||||
Right = 'Right',}
|
||||
|
||||
export interface ButtonConfig{
|
||||
label?: string,
|
||||
link?: string,
|
||||
style?: 'Primary' | 'Secondary' | 'Outline' | 'Text',
|
||||
size?: 'Small' | 'Medium' | 'Large',
|
||||
openInNewTab?: boolean,
|
||||
}
|
||||
|
||||
export interface ImageConfig{
|
||||
position: ImagePosition,
|
||||
url: string,
|
||||
alt?: string,
|
||||
width?: number,
|
||||
height?: number,
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user