import React, { useState, useRef } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { Download } from "lucide-react";
import { motion } from "framer-motion";
import domtoimage from "dom-to-image";
/**
* IceHockeyJerseyBuilder – a simple interactive jersey configurator.
*
* Features:
* - Pick body, sleeve, stripe & collar colours (colour inputs)
* - Enter player name & number (live preview)
* - Download PNG snapshot of design
*
* Style framework: Tailwind CSS + shadcn/ui for basic elements
* Icons: lucide-react
*/
const IceHockeyJerseyBuilder = () => {
// --- State ---
const [bodyColor, setBodyColor] = useState("#004080"); // navy blue default
const [sleeveColor, setSleeveColor] = useState("#ffffff");
const [stripeColor, setStripeColor] = useState("#c8102e"); // red stripe default
const [collarColor, setCollarColor] = useState("#000000");
const [nameText, setNameText] = useState("PLAYER");
const [numberText, setNumberText] = useState("22");
// ref for export
const jerseyRef = useRef(null);
// --- Helpers ---
const handleDownload = async () => {
if (!jerseyRef.current) return;
try {
const blob = await domtoimage.toBlob(jerseyRef.current);
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
link.download = `jersey_${Date.now()}.png`;
link.click();
URL.revokeObjectURL(url);
} catch (err) {
console.error("Download failed", err);
alert("Sorry, something went wrong generating the image.");
}
};
// --- JSX ---
return (
);
export default IceHockeyJerseyBuilder;
{/* Controls Panel */}
setBodyColor(e.target.value)}
/>
setSleeveColor(e.target.value)}
/>
setStripeColor(e.target.value)}
/>
setCollarColor(e.target.value)}
/>
{/* Name & Number */}
{/* Download button */}
{/* Jersey Preview */}
{/* Body */}
);
};
/** Reusable colour picker */
const ColourPicker = ({ label, value, onChange }) => (
Customize Your Jersey
{/* Colours */}
setNameText(e.target.value.toUpperCase())}
placeholder="PLAYER"
/>
setNumberText(e.target.value)}
placeholder="22"
min="0"
/>
{/* Sleeves */}
{/* Stripes */}
{/* Collar */}
{/* Name & Number */}
{nameText}
{numberText}
import React, { useState, useRef } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { Download } from "lucide-react";
import { motion } from "framer-motion";
import domtoimage from "dom-to-image";
/**
* IceHockeyJerseyBuilder – a simple interactive jersey configurator.
*
* Features:
* - Pick body, sleeve, stripe & collar colours (colour inputs)
* - Enter player name & number (live preview)
* - Download PNG snapshot of design
*
* Style framework: Tailwind CSS + shadcn/ui for basic elements
* Icons: lucide-react
*/
const IceHockeyJerseyBuilder = () => {
// --- State ---
const [bodyColor, setBodyColor] = useState("#004080"); // navy blue default
const [sleeveColor, setSleeveColor] = useState("#ffffff");
const [stripeColor, setStripeColor] = useState("#c8102e"); // red stripe default
const [collarColor, setCollarColor] = useState("#000000");
const [nameText, setNameText] = useState("PLAYER");
const [numberText, setNumberText] = useState("22");
// ref for export
const jerseyRef = useRef(null);
// --- Helpers ---
const handleDownload = async () => {
if (!jerseyRef.current) return;
try {
const blob = await domtoimage.toBlob(jerseyRef.current);
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
link.download = `jersey_${Date.now()}.png`;
link.click();
URL.revokeObjectURL(url);
} catch (err) {
console.error("Download failed", err);
alert("Sorry, something went wrong generating the image.");
}
};
// --- JSX ---
return (
);
export default IceHockeyJerseyBuilder;
{/* Controls Panel */}
setBodyColor(e.target.value)}
/>
setSleeveColor(e.target.value)}
/>
setStripeColor(e.target.value)}
/>
setCollarColor(e.target.value)}
/>
{/* Name & Number */}
{/* Download button */}
{/* Jersey Preview */}
{/* Body */}
);
};
/** Reusable colour picker */
const ColourPicker = ({ label, value, onChange }) => (
Customize Your Jersey
{/* Colours */}
setNameText(e.target.value.toUpperCase())}
placeholder="PLAYER"
/>
setNumberText(e.target.value)}
placeholder="22"
min="0"
/>
{/* Sleeves */}
{/* Stripes */}
{/* Collar */}
{/* Name & Number */}
{nameText}
{numberText}