// Файл: App.tsx
import React, { useState } from "react";
import { Button } from "@/components/ui/button";
import { Content } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Slider } from "@/components/ui/slider";
export default function App() {
const [image, setImage] = useState<string | null>(null);
const [height, setHeight] = useState(250); // висота в см
const [guides, setGuides] = useState<{ top: number; bottom: number }>({
top: 20,
bottom: 80,
});
const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
if (file) {
const reader = new FileReader();
reader.onloadend = () => {
setImage(reader.result as string);
};
reader.readAsDataURL(file);
}
};
return (
<main className="p-4 max-w-xl mx-auto">
<h1 className="text-2xl font-bold mb-4">Редактор кімнати (Qoombo)</h1>
<Input type="file" accept="image/*" onChange={handleImageChange} />
<div className="my-4">
<label className="block mb-1">
Висота кімнати (см): {height}
</label>
<Slider
min={150}
max={400}
value={[height]}
onValueChange={([h]) => setHeight(h)}
/>
</div>
{image && (
<Card>
<CardContent className="relative">
<img src={image} alt="panorama" className="w-full" />
<div
className="absolute left-0 right-0 h-0.5 bg-red-500"
style={{ top: ${guides.top}% }}
/>
<div
className="absolute left-0 right-0 h-0.5 bg-blue-500"
style={{ top: ${guides.bottom}% }}
/>
<div className="mt-4 space-y-2">
<label>Верхня лінія: {guides.top}%</label>
<Slider
min={0}
max={100}
value={[guides.top]}
onValueChange={([val]) =>
08:38