75 lines
2.0 KiB
TypeScript
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;
|