72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
import Image from "next/image";
|
|
import styles from "@/features/predictions/styles/predictions.module.css";
|
|
|
|
type PredictionTileBaseProps = {
|
|
title: string;
|
|
description?: string | null;
|
|
badge?: string;
|
|
favorite?: boolean;
|
|
dirty: boolean;
|
|
saving: boolean;
|
|
disabled?: boolean;
|
|
showSubmitButton?: boolean;
|
|
successMessage?: string;
|
|
errorMessage?: string;
|
|
basePoints?: number;
|
|
iconSrc?: string;
|
|
onSubmit: () => void;
|
|
children: React.ReactNode;
|
|
};
|
|
|
|
export function PredictionTileBase({
|
|
title,
|
|
description,
|
|
badge,
|
|
favorite,
|
|
dirty,
|
|
saving,
|
|
disabled,
|
|
showSubmitButton = true,
|
|
successMessage,
|
|
errorMessage,
|
|
basePoints,
|
|
iconSrc,
|
|
onSubmit,
|
|
children,
|
|
}: PredictionTileBaseProps) {
|
|
return (
|
|
<article className={`${styles.tile} ${favorite ? styles.tileFavorite : ""}`}>
|
|
<header className={styles.tileHeader}>
|
|
{iconSrc ? (
|
|
<Image src={iconSrc} alt="" width={48} height={48} className={styles.tileIcon} />
|
|
) : null}
|
|
<div>
|
|
<h3>{title}</h3>
|
|
{description ? <p>{description}</p> : null}
|
|
</div>
|
|
{badge ? <span className={styles.badge}>{badge}</span> : null}
|
|
</header>
|
|
|
|
<div className={styles.tileBody}>{children}</div>
|
|
|
|
<footer className={styles.tileFooter}>
|
|
{basePoints && basePoints > 0 ? (
|
|
<span className={styles.pointsLabel}>
|
|
<Image src="/images/pictos/bebe-fille.png" alt="" width={22} height={22} className={styles.pointsLabelIcon} />
|
|
Gagnez {basePoints} Points!
|
|
<Image src="/images/pictos/bebe-garcon.png" alt="" width={22} height={22} className={styles.pointsLabelIcon} />
|
|
</span>
|
|
) : null}
|
|
{showSubmitButton ? (
|
|
<button className="btn btn-primary" onClick={onSubmit} disabled={saving || disabled}>
|
|
{saving ? "Validation..." : "Valider mon pronostic"}
|
|
</button>
|
|
) : null}
|
|
{dirty ? <span className={styles.dirty}>Modifications non enregistrées</span> : null}
|
|
{successMessage ? <p className={styles.success}>{successMessage}</p> : null}
|
|
{errorMessage ? <p className={styles.error}>{errorMessage}</p> : null}
|
|
</footer>
|
|
</article>
|
|
);
|
|
}
|