photo preview portion fixed

This commit is contained in:
Saimon8420 2025-01-05 12:20:18 +06:00
parent 56ef0c44ff
commit 3f3ac499d3
2 changed files with 65 additions and 60 deletions

View file

@ -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';

View file

@ -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>