44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
|
import React, { useState } from "react";
|
||
|
|
import LabledDropdown from "./LabledDropdown";
|
||
|
|
import { ArrowIcon } from "../../icons/ExportCommonIcons";
|
||
|
|
|
||
|
|
const PreviewSelectionWithUpload: React.FC = () => {
|
||
|
|
const [showPreview, setSetshowPreview] = useState(false);
|
||
|
|
return (
|
||
|
|
<div className="preview-selection-with-upload-wrapper">
|
||
|
|
<div
|
||
|
|
className="input-header-container"
|
||
|
|
onClick={() => setSetshowPreview(!showPreview)}
|
||
|
|
>
|
||
|
|
<div className="input-header">Preview</div>
|
||
|
|
<div
|
||
|
|
className="arrow-container"
|
||
|
|
style={{ rotate: showPreview ? "0deg" : "90deg" }}
|
||
|
|
>
|
||
|
|
<ArrowIcon />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{showPreview && (
|
||
|
|
<div className="canvas-wrapper">
|
||
|
|
<div className="canvas-container"></div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
<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>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default PreviewSelectionWithUpload;
|