CropModals: two different for now because of aspect ratios - maybe merge into one
This commit is contained in:
seaznCode
parent
20c71636f6
commit
1c87ba150e
@ -0,0 +1,132 @@
|
|||||||
|
'use client'
|
||||||
|
import React, { useState, useCallback } from 'react'
|
||||||
|
import Cropper from 'react-easy-crop'
|
||||||
|
import { Point, Area } from 'react-easy-crop'
|
||||||
|
|
||||||
|
interface AffiliateCropModalProps {
|
||||||
|
isOpen: boolean
|
||||||
|
imageSrc: string
|
||||||
|
onClose: () => void
|
||||||
|
onCropComplete: (croppedImageBlob: Blob) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function AffiliateCropModal({ isOpen, imageSrc, onClose, onCropComplete }: AffiliateCropModalProps) {
|
||||||
|
const [crop, setCrop] = useState<Point>({ x: 0, y: 0 })
|
||||||
|
const [zoom, setZoom] = useState(1)
|
||||||
|
const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null)
|
||||||
|
|
||||||
|
const onCropAreaComplete = useCallback((_croppedArea: Area, croppedAreaPixels: Area) => {
|
||||||
|
setCroppedAreaPixels(croppedAreaPixels)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const createCroppedImage = async () => {
|
||||||
|
if (!croppedAreaPixels) return
|
||||||
|
|
||||||
|
const image = new Image()
|
||||||
|
image.src = imageSrc
|
||||||
|
await new Promise((resolve) => {
|
||||||
|
image.onload = resolve
|
||||||
|
})
|
||||||
|
|
||||||
|
const canvas = document.createElement('canvas')
|
||||||
|
const ctx = canvas.getContext('2d')
|
||||||
|
if (!ctx) return
|
||||||
|
|
||||||
|
// Set canvas size to cropped area
|
||||||
|
canvas.width = croppedAreaPixels.width
|
||||||
|
canvas.height = croppedAreaPixels.height
|
||||||
|
|
||||||
|
ctx.drawImage(
|
||||||
|
image,
|
||||||
|
croppedAreaPixels.x,
|
||||||
|
croppedAreaPixels.y,
|
||||||
|
croppedAreaPixels.width,
|
||||||
|
croppedAreaPixels.height,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
croppedAreaPixels.width,
|
||||||
|
croppedAreaPixels.height
|
||||||
|
)
|
||||||
|
|
||||||
|
return new Promise<Blob>((resolve) => {
|
||||||
|
canvas.toBlob((blob) => {
|
||||||
|
if (blob) resolve(blob)
|
||||||
|
}, 'image/jpeg', 0.95)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSave = async () => {
|
||||||
|
const croppedBlob = await createCroppedImage()
|
||||||
|
if (croppedBlob) {
|
||||||
|
onCropComplete(croppedBlob)
|
||||||
|
onClose()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isOpen) return null
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/70">
|
||||||
|
<div className="relative w-full max-w-4xl mx-4 bg-white rounded-2xl shadow-2xl overflow-hidden">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between bg-gradient-to-r from-blue-50 to-white">
|
||||||
|
<h2 className="text-xl font-semibold text-blue-900">Crop Affiliate Logo</h2>
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="text-gray-500 hover:text-gray-700 transition"
|
||||||
|
aria-label="Close"
|
||||||
|
>
|
||||||
|
✕
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Crop Area */}
|
||||||
|
<div className="relative bg-gray-900" style={{ height: '500px' }}>
|
||||||
|
<Cropper
|
||||||
|
image={imageSrc}
|
||||||
|
crop={crop}
|
||||||
|
zoom={zoom}
|
||||||
|
aspect={3 / 2}
|
||||||
|
onCropChange={setCrop}
|
||||||
|
onZoomChange={setZoom}
|
||||||
|
onCropComplete={onCropAreaComplete}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Controls */}
|
||||||
|
<div className="px-6 py-4 border-t border-gray-200 bg-gray-50">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-blue-900 mb-2">
|
||||||
|
Zoom: {zoom.toFixed(1)}x
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
min={1}
|
||||||
|
max={3}
|
||||||
|
step={0.1}
|
||||||
|
value={zoom}
|
||||||
|
onChange={(e) => setZoom(Number(e.target.value))}
|
||||||
|
className="w-full h-2 bg-blue-200 rounded-lg appearance-none cursor-pointer accent-blue-900"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-end gap-3">
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="px-5 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handleSave}
|
||||||
|
className="px-5 py-2.5 text-sm font-semibold text-white bg-blue-900 rounded-lg hover:bg-blue-800 shadow transition"
|
||||||
|
>
|
||||||
|
Apply Crop
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
132
src/app/admin/subscriptions/components/ImageCropModal.tsx
Normal file
132
src/app/admin/subscriptions/components/ImageCropModal.tsx
Normal file
@ -0,0 +1,132 @@
|
|||||||
|
'use client'
|
||||||
|
import React, { useState, useCallback } from 'react'
|
||||||
|
import Cropper from 'react-easy-crop'
|
||||||
|
import { Point, Area } from 'react-easy-crop'
|
||||||
|
|
||||||
|
interface ImageCropModalProps {
|
||||||
|
isOpen: boolean
|
||||||
|
imageSrc: string
|
||||||
|
onClose: () => void
|
||||||
|
onCropComplete: (croppedImageBlob: Blob) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ImageCropModal({ isOpen, imageSrc, onClose, onCropComplete }: ImageCropModalProps) {
|
||||||
|
const [crop, setCrop] = useState<Point>({ x: 0, y: 0 })
|
||||||
|
const [zoom, setZoom] = useState(1)
|
||||||
|
const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null)
|
||||||
|
|
||||||
|
const onCropAreaComplete = useCallback((_croppedArea: Area, croppedAreaPixels: Area) => {
|
||||||
|
setCroppedAreaPixels(croppedAreaPixels)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const createCroppedImage = async () => {
|
||||||
|
if (!croppedAreaPixels) return
|
||||||
|
|
||||||
|
const image = new Image()
|
||||||
|
image.src = imageSrc
|
||||||
|
await new Promise((resolve) => {
|
||||||
|
image.onload = resolve
|
||||||
|
})
|
||||||
|
|
||||||
|
const canvas = document.createElement('canvas')
|
||||||
|
const ctx = canvas.getContext('2d')
|
||||||
|
if (!ctx) return
|
||||||
|
|
||||||
|
// Set canvas size to cropped area
|
||||||
|
canvas.width = croppedAreaPixels.width
|
||||||
|
canvas.height = croppedAreaPixels.height
|
||||||
|
|
||||||
|
ctx.drawImage(
|
||||||
|
image,
|
||||||
|
croppedAreaPixels.x,
|
||||||
|
croppedAreaPixels.y,
|
||||||
|
croppedAreaPixels.width,
|
||||||
|
croppedAreaPixels.height,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
croppedAreaPixels.width,
|
||||||
|
croppedAreaPixels.height
|
||||||
|
)
|
||||||
|
|
||||||
|
return new Promise<Blob>((resolve) => {
|
||||||
|
canvas.toBlob((blob) => {
|
||||||
|
if (blob) resolve(blob)
|
||||||
|
}, 'image/jpeg', 0.95)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSave = async () => {
|
||||||
|
const croppedBlob = await createCroppedImage()
|
||||||
|
if (croppedBlob) {
|
||||||
|
onCropComplete(croppedBlob)
|
||||||
|
onClose()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isOpen) return null
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70">
|
||||||
|
<div className="relative w-full max-w-4xl mx-4 bg-white rounded-2xl shadow-2xl overflow-hidden">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between bg-gradient-to-r from-blue-50 to-white">
|
||||||
|
<h2 className="text-xl font-semibold text-blue-900">Crop & Adjust Image</h2>
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="text-gray-500 hover:text-gray-700 transition"
|
||||||
|
aria-label="Close"
|
||||||
|
>
|
||||||
|
✕
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Crop Area */}
|
||||||
|
<div className="relative bg-gray-900" style={{ height: '500px' }}>
|
||||||
|
<Cropper
|
||||||
|
image={imageSrc}
|
||||||
|
crop={crop}
|
||||||
|
zoom={zoom}
|
||||||
|
aspect={16 / 9}
|
||||||
|
onCropChange={setCrop}
|
||||||
|
onZoomChange={setZoom}
|
||||||
|
onCropComplete={onCropAreaComplete}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Controls */}
|
||||||
|
<div className="px-6 py-4 border-t border-gray-200 bg-gray-50">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-blue-900 mb-2">
|
||||||
|
Zoom: {zoom.toFixed(1)}x
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
min={1}
|
||||||
|
max={3}
|
||||||
|
step={0.1}
|
||||||
|
value={zoom}
|
||||||
|
onChange={(e) => setZoom(Number(e.target.value))}
|
||||||
|
className="w-full h-2 bg-blue-200 rounded-lg appearance-none cursor-pointer accent-blue-900"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-end gap-3">
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="px-5 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handleSave}
|
||||||
|
className="px-5 py-2.5 text-sm font-semibold text-white bg-blue-900 rounded-lg hover:bg-blue-800 shadow transition"
|
||||||
|
>
|
||||||
|
Apply Crop
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user