Spaces:
Sleeping
Sleeping
| import { useRef, useState } from "react"; | |
| import { ACCEPT, MAX_UPLOAD_MB, type Sample } from "../api"; | |
| interface Props { | |
| samples: Sample[] | null; | |
| selectedId: string | null; | |
| fileName: string | null; | |
| onSample: (s: Sample) => void; | |
| onFile: (f: File) => void; | |
| } | |
| export function InputPanel({ samples, selectedId, fileName, onSample, onFile }: Props) { | |
| const fileRef = useRef<HTMLInputElement>(null); | |
| const [over, setOver] = useState(false); | |
| return ( | |
| <section className="card o-input" aria-labelledby="input-h"> | |
| <div className="card-head"> | |
| <h2 id="input-h">Input</h2> | |
| <p>Real phone RAW or a photo</p> | |
| </div> | |
| <ul className="samples"> | |
| {samples === null | |
| ? Array.from({ length: 5 }, (_, i) => ( | |
| <li key={i}> | |
| <div className="sample" aria-hidden="true"> | |
| <div className="thumb-skel" /> | |
| <div> | |
| <div className="skel" style={{ height: 14, width: "80%" }} /> | |
| <div className="skel" style={{ height: 12, width: "55%", marginTop: 6 }} /> | |
| </div> | |
| </div> | |
| </li> | |
| )) | |
| : samples.map((s) => ( | |
| <li key={s.id}> | |
| <button className="sample" aria-pressed={selectedId === s.id} onClick={() => onSample(s)}> | |
| <img src={s.thumb_url} alt="" width={52} height={52} loading="lazy" /> | |
| <span> | |
| <span className="sample-name">{s.name}</span> | |
| <span className="sample-meta"> | |
| {s.kind === "sidd" ? `Real RAW · unseen test scene` : "Photo → simulated RAW"} | |
| </span> | |
| </span> | |
| </button> | |
| </li> | |
| ))} | |
| </ul> | |
| <button | |
| className={"drop" + (over ? " over" : "")} | |
| onClick={() => fileRef.current?.click()} | |
| onDragOver={(e) => { e.preventDefault(); setOver(true); }} | |
| onDragLeave={() => setOver(false)} | |
| onDrop={(e) => { | |
| e.preventDefault(); | |
| setOver(false); | |
| const f = e.dataTransfer.files?.[0]; | |
| if (f) onFile(f); | |
| }} | |
| > | |
| <strong>{fileName ? `Using ${fileName}` : "Drop your own photo"}</strong> | |
| <span>{fileName ? "Drop another, or browse" : "or browse your files"}</span> | |
| <span className="small">DNG, NEF, CR2, ARW and other RAW, or JPG / PNG · up to {MAX_UPLOAD_MB} MB</span> | |
| </button> | |
| <input | |
| ref={fileRef} | |
| type="file" | |
| accept={ACCEPT} | |
| className="sr-only" | |
| tabIndex={-1} | |
| aria-label="Upload a RAW file or photo" | |
| onChange={(e) => { | |
| const f = e.target.files?.[0]; | |
| if (f) onFile(f); | |
| e.target.value = ""; | |
| }} | |
| /> | |
| </section> | |
| ); | |
| } | |