photo preview portion fixed
This commit is contained in:
parent
56ef0c44ff
commit
3f3ac499d3
2 changed files with 65 additions and 60 deletions
|
|
@ -1,4 +1,4 @@
|
|||
import { useEffect, useState } from 'react';
|
||||
import { useEffect } from 'react';
|
||||
import './App.css'
|
||||
import Canvas from './components/Canvas'
|
||||
import WebFont from 'webfontloader';
|
||||
|
|
|
|||
|
|
@ -203,6 +203,8 @@ const UploadImage = () => {
|
|||
</div>
|
||||
|
||||
{/* upload image */}
|
||||
{
|
||||
!preview &&
|
||||
<div className="max-w-md mx-auto p-4">
|
||||
<Card>
|
||||
<CardContent className="p-6 space-y-4">
|
||||
|
|
@ -227,10 +229,16 @@ const UploadImage = () => {
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
}
|
||||
|
||||
{/* preview image */}
|
||||
{preview && (
|
||||
<div className="relative">
|
||||
<div className="w-fit aspect-square relative">
|
||||
<Card className="overflow-y-scroll rounded-none">
|
||||
<CardContent className="mt-2 mb-2">
|
||||
<div className="w-fit aspect-square relative h-[100%]">
|
||||
{
|
||||
file?.type === "image/svg+xml" ? <object
|
||||
data={preview}
|
||||
|
|
@ -243,13 +251,13 @@ const UploadImage = () => {
|
|||
<img
|
||||
src={preview}
|
||||
alt="Uploaded image"
|
||||
className="object-cover rounded-lg"
|
||||
className="object-cover rounded-lg overflow-hidden"
|
||||
/>
|
||||
}
|
||||
|
||||
<Separator className="my-4" />
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<span className="text-sm text-gray-600">{file?.name}</span>
|
||||
<div className="grid grid-cols-1 gap-2 items-center pb-4">
|
||||
<p className="text-sm text-gray-600 truncate">{file?.name}</p>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
|
|
@ -260,12 +268,9 @@ const UploadImage = () => {
|
|||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
)}
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue