あべ依頼記事2

import React, { useState, useRef, useEffect } from ‘react’;
import { Input } from ‘@/components/ui/input’;
import { Button } from ‘@/components/ui/button’;

const getRandomColor = () => {
const hue = Math.floor(Math.random() * 360);
const saturation = Math.floor(Math.random() * 30) + 70; // 70-100%
const lightness = Math.floor(Math.random() * 30) + 35; // 35-65%
return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
};

const AppIconGenerator = () => {
const [text, setText] = useState(”);
const [backgroundColor, setBackgroundColor] = useState(getRandomColor());
const [fontSize, setFontSize] = useState(40);
const textDivRef = useRef(null);

const generateNewIcon = () => {
setBackgroundColor(getRandomColor());
};

useEffect(() => {
if (textDivRef.current) {
const textDiv = textDivRef.current;
const containerWidth = 115;
const containerHeight = 115;

// Reset font size to start fresh
textDiv.style.fontSize = ’40px’;

// Reduce font size until text fits
while ((textDiv.scrollWidth > containerWidth || textDiv.scrollHeight > containerHeight) && parseInt(textDiv.style.fontSize) > 10) {
textDiv.style.fontSize = `${parseInt(textDiv.style.fontSize) – 1}px`;
}

setFontSize(parseInt(textDiv.style.fontSize));
}
}, [text]);

return (

);
};

export default AppIconGenerator;