📦 MediaInfoCard

MediaInfoCard est un composant React Native réutilisable, conçu pour afficher un média (image, vidéo, etc.) avec un titre, un corps de texte, et des interactions configurables. Il est hautement personnalisable et réactif aux états comme le focus ou hover.

✨ Fonctionnalités

• Affichage flexible d’un média avec overlay
• Support du mode focus avec des attributs spécifiques
• Personnalisation poussée (alignement, taille, poids des textes, radius, etc.)
• Comportements interactifs via useInfoCard
• Rendu optimisé avec @legendapp/state/react et <Computed>

📦 Installation

1npm install react-native
2npm install @legendapp/state

🚀 Utilisation

1import MediaInfoCard from './MediaInfoCard';
2
3<MediaInfoCard
4  title="Titre principal"
5  body="Description brève"
6  media={<Image source={require('./img.png')} style={{ width: '100%', height: '100%' }} />}
7  mediaWidth={120}
8  mediaHeight={120}
9  mediaRadius={10}
10  mainColor="#222"
11  vertical
12  spacing={16}
13/>

🧩 Props

Nom	Type	Description
title	string | ReactNode	Titre affiché
body	string | ReactNode	Corps du texte
media	ReactNode	Élément média affiché
mediaWidth	number	Largeur du média
mediaHeight	number	Hauteur du média
mediaRadius	number	Rayon des coins du média
mediaBorder	number	Bordure autour du média
mediaGap	number	Espace entre le média et les textes
mediaOverlay	ReactNode	Élément superposé au média
mediaSquare	boolean (default: true)	Forcer un format carré
mainColor	string	Couleur principale utilisée
titleSize	number	Taille du titre
titleWeight	string | number	Poids du titre
titleLines	number	Limite de lignes pour le titre
bodySize	number	Taille du corps
bodyWeight	string | number	Poids du corps
bodyLines	number	Limite de lignes pour le corps
vertical	boolean	Affichage vertical des éléments
spacing	number (default: 12)	Espacement entre les sections
align	"left" | "center" | "right"	Alignement du contenu
justify	"flex-start" | "center" | "flex-end"	Justification du contenu
fullWidth	boolean	Utiliser toute la largeur disponible
focus	boolean	État focus (surbrillance)
hoverable	boolean	Applique un effet de hover
lighterHighlight	boolean	Applique un surlignage clair
radius	number (default: 5)	Rayon des coins de la carte
adaptWidthToMedia	boolean	Adapter la largeur du container au média
attrsOnFocus	Partial<MediaInfoCardProps>	Props à appliquer en mode focus

⚙️ Interactions dynamiques comme resolvePress, resolveMediaPress, etc. sont gérées via useInfoCard.

🧠 Architecture

• components/ : composants atomiques réutilisables
• hooks/useInfoCard.ts : logique métier et gestion des press handlers
• MediaInfoCard.tsx : wrapper principal
• types/MediaInfoCardProps.ts : typage des props

📄 Licence

MIT