Skip to content

Commit

Permalink
fix: vertical card
Browse files Browse the repository at this point in the history
  • Loading branch information
@marc-gavanier
marc-gavanier committed Sep 13, 2024
1 parent 318fec8 commit 02f8174
Show file tree
Hide file tree
Showing 2 changed files with 98 additions and 107 deletions.
10 changes: 1 addition & 9 deletions src/app/_components/page-content/BlocCards.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -212,15 +212,7 @@ export const BlocCards = ({ articles, type }: BlocCardsProps) => {
{articleType == 'breve' &&
subArticles[cursor - 1] &&
subArticles[cursor - 1].map((article) => (
<VerticalCard
key={article.titre_de_la_carte}
data={
article as unknown as {
attributes: CardData;
}
}
rows={0}
/>
<VerticalCard key={article.titre_de_la_carte} data={article as unknown as CardData} rows={0} />
))}
</div>
</div>
Expand Down
195 changes: 97 additions & 98 deletions src/app/_components/page-content/VerticalCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
'use client';

import Link from 'next/link';
import { labelColors, marginsBottom } from '../structs';

Expand All @@ -17,125 +15,126 @@ export type CardData = {
id: string;
type: 'carte-verticale' | 'autre';
espacement_bas: keyof typeof marginsBottom;
label: 'Evènement' | string;
nom_de_page: string;
titre_de_la_carte: string;
label?: 'Evènement' | string;
nom_de_page?: string;
titre_de_la_carte?: string;
image: {
data?: ImageData;
data: ImageData | null;
};
labels: Label[];
lien: string;
titre_du_lien: string;
texte_en_valeur: string;
texte: string;
texte_en_valeur: string | null;
texte: 'Moyen' | null;
position?: 'Centre' | string;
};

type VerticalCardProps = {
data: {
attributes: CardData;
};
data: CardData;
rows: number;
height?: string;
width?: string;
fontsizeLabel?: string;
text?: string;
};

export const VerticalCard: React.FC<VerticalCardProps> = ({ data, rows, height, width, fontsizeLabel, text }) => (
<>
{data.attributes.type !== 'carte-verticale' && (
<div key={data.attributes.id}>
<div
className='fr-card fr-enlarge-link'
style={{
height: '430px',
marginBottom: marginsBottom[data.attributes.espacement_bas] || '0px'
}}>
<div className='fr-card__body card-img'>
<div className='fr-card__content'>
<p className={data.attributes.label === 'Evènement' ? 'fr-tag jaune' : 'fr-tag rose'}>{data.attributes.label}</p>
<h3 className='fr-card__title mt1'>
<Link href={`/${data.attributes.nom_de_page}`} className='grey-75'>
{data.attributes.titre_de_la_carte}
</Link>
</h3>
</div>
</div>
{data.attributes.image.data?.attributes.url && (
<div className='fr-card__header' style={{ height: '200px', overflow: 'hidden' }}>
<img className='fr-responsive-img' src={data.attributes.image.data.attributes.url} alt='' loading='lazy' />
</div>
)}
</div>
</div>
)}
{data.attributes.type === 'carte-verticale' && (
<div
key={data.attributes.id}
className='mt2 mb2'
style={{
display: 'flex',
justifyContent: rows > 1 ? 'center' : data.attributes.position === 'Centre' ? 'center' : '',
marginBottom: marginsBottom[data.attributes.espacement_bas] || '0px'
}}>
<div className='fr-card fr-enlarge-link'>
export const VerticalCard = ({ data, rows, height, width, fontsizeLabel, text }: VerticalCardProps) => {
console.log(data);
return (
<>
{data.type !== 'carte-verticale' && (
<div key={data.id}>
<div
className='fr-card__body card-img mb3'
className='fr-card fr-enlarge-link'
style={{
height: height && rows === 1 ? height : '',
width: width && rows === 1 ? width : ''
height: '430px',
marginBottom: marginsBottom[data.espacement_bas] || '0px'
}}>
<div className='fr-card__body card-img'>
<div className='fr-card__content'>
<p className={data.label === 'Evènement' ? 'fr-tag jaune' : 'fr-tag rose'}>{data.label}</p>
<h3 className='fr-card__title mt1'>
<Link href={`/${data.nom_de_page}`} className='grey-75'>
{data.titre_de_la_carte}
</Link>
</h3>
</div>
</div>
{data.image.data?.attributes.url && (
<div className='fr-card__header' style={{ height: '200px', overflow: 'hidden' }}>
<img className='fr-responsive-img' src={data.image.data.attributes.url} alt='' loading='lazy' />
</div>
)}
</div>
</div>
)}
{data.type === 'carte-verticale' && (
<div
key={data.id}
className='mt2 mb2'
style={{
display: 'flex',
justifyContent: rows > 1 ? 'center' : data.position === 'Centre' ? 'center' : '',
marginBottom: marginsBottom[data.espacement_bas] || '0px'
}}>
<div className='fr-card fr-enlarge-link'>
<div
className='fr-card__content'
className='fr-card__body card-img mb3'
style={{
paddingLeft: '16px',
paddingRight: '16px',
paddingTop: '0px'
height: height && rows === 1 ? height : '',
width: width && rows === 1 ? width : ''
}}>
<div>
{data.attributes.labels.length > 0 &&
data.attributes.labels.map((label) => (
<span
key={label.titre_du_label}
className={`card-label ${labelColors['Violet']}`}
style={{
fontSize: fontsizeLabel,
color: 'rgb(0,0,185)'
}}>
{label.titre_du_label}
</span>
))}
<div
className='fr-card__content'
style={{
paddingLeft: '16px',
paddingRight: '16px',
paddingTop: '0px'
}}>
<div>
{data.labels.length > 0 &&
data.labels.map((label) => (
<span
key={label.titre_du_label}
className={`card-label ${labelColors['Violet']}`}
style={{
fontSize: fontsizeLabel,
color: 'rgb(0,0,185)'
}}>
{label.titre_du_label}
</span>
))}
</div>
<h4 className='mt1'>
<Link
href={data.lien}
target={data.lien.includes('https://') ? '_blank' : undefined}
style={{ color: '#000091' }}>
{data.titre_du_lien}
</Link>
</h4>
<p>
<strong>{data.texte_en_valeur}</strong> {text && text.length > 0 ? text : data.texte}
</p>
<i className='ri-arrow-right-line vertical-card-arrow'></i>
</div>
<h4 className='mt1'>
<Link
href={data.attributes.lien}
target={data.attributes.lien.includes('https://') ? '_blank' : undefined}
style={{ color: '#000091' }}>
{data.attributes.titre_du_lien}
</Link>
</h4>
<p>
<strong>{data.attributes.texte_en_valeur}</strong> {text && text.length > 0 ? text : data.attributes.texte}
</p>
<i className='ri-arrow-right-line vertical-card-arrow'></i>
</div>
{data.image.data?.attributes.url && (
<div className='fr-card__header' style={{ height: '200px', overflow: 'hidden' }}>
<img
className='fr-responsive-img'
src={data.image.data.attributes.url}
alt=''
loading='lazy'
style={{
width: width && rows === 1 ? width : ''
}}
/>
</div>
)}
</div>
{data.attributes.image.data?.attributes.url && (
<div className='fr-card__header' style={{ height: '200px', overflow: 'hidden' }}>
<img
className='fr-responsive-img'
src={data.attributes.image.data.attributes.url}
alt=''
loading='lazy'
style={{
width: width && rows === 1 ? width : ''
}}
/>
</div>
)}
</div>
</div>
)}
</>
);
)}
</>
);
};

0 comments on commit 02f8174

Please sign in to comment.