Dwinzo_dev/app/src/components/ui/inputs/PreviewSelectionWithUpload.tsx

75 lines
2.0 KiB
TypeScript

import React, { useState } from "react";
import { ArrowIcon } from "../../icons/ExportCommonIcons";
import LabledDropdown from "./LabledDropdown";
interface PreviewSelectionWithUploadProps {
preview?: boolean;
upload?: boolean;
label?: string;
onSelect: (option: string) => void;
defaultOption: string;
options: string[];
}
const PreviewSelectionWithUpload: React.FC<PreviewSelectionWithUploadProps> = ({
preview = false,
upload = false,
onSelect,
label,
defaultOption,
options,
}) => {
const [showPreview, setShowPreview] = useState(false);
return (
<div className="preview-selection-with-upload-wrapper">
{preview && (
<>
<button
className="input-header-container"
onClick={() => setShowPreview(!showPreview)}
>
<div className="input-header">Preview</div>
<div
className="arrow-container"
style={{ rotate: showPreview ? "0deg" : "90deg" }}
>
<ArrowIcon />
</div>
</button>
{showPreview && (
<div className="canvas-wrapper">
<div className="canvas-container"></div>
</div>
)}
</>
)}
{upload && (
<div className="asset-selection-container">
<div className="upload-custom-asset-button">
<div className="title">Upload Product</div>
<input
type="file"
accept=".glb, .gltf"
id="simulation-product-upload"
/>
<label
className="upload-button"
htmlFor="simulation-product-upload"
>
Upload here
</label>
</div>
</div>
)}
<LabledDropdown
label={label}
defaultOption={defaultOption}
options={options}
onSelect={onSelect}
/>
</div>
);
};
export default PreviewSelectionWithUpload;