99 lines
5.4 KiB
TypeScript
99 lines
5.4 KiB
TypeScript
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
'use client'
|
|
import RoomCard from '@/components/RoomCard'
|
|
import { CallApi } from '@/helper/api/ApiConnector'
|
|
import Link from 'next/link'
|
|
import React, { useState } from 'react'
|
|
|
|
export default function Search() {
|
|
const [details, setDetails] = useState<{
|
|
id?: number;
|
|
image: any,
|
|
title: string,
|
|
room: string,
|
|
color: string
|
|
}>()
|
|
|
|
const handleSave = async () => {
|
|
console.log(await CallApi(`/room`, 'POST', { id: 0, ...details,image: details?.image }))
|
|
}
|
|
|
|
return (
|
|
<div className='w-screen h-screen bg-black'
|
|
// style={{ 'background': 'conic-gradient(from 210deg, #c6bcb9 0.000deg, #c6bcb9 24.000deg, #b9b6b9 calc(24.000deg + 0.1deg), #b9b6b9 48.000deg, #aab0b8 calc(48.000deg + 0.1deg), #aab0b8 72.000deg, #9ba9b6 calc(72.000deg + 0.1deg), #9ba9b6 96.000deg, #8ca2b4 calc(96.000deg + 0.1deg), #8ca2b4 120.000deg, #7e99b0 calc(120.000deg + 0.1deg), #7e99b0 144.000deg, #7191ac calc(144.000deg + 0.1deg), #7191ac 168.000deg, #6688a7 calc(168.000deg + 0.1deg), #6688a7 192.000deg, #5d7fa2 calc(192.000deg + 0.1deg), #5d7fa2 216.000deg, #56769c calc(216.000deg + 0.1deg), #56769c 240.000deg, #526d95 calc(240.000deg + 0.1deg), #526d95 264.000deg, #50648e calc(264.000deg + 0.1deg), #50648e 288.000deg, #515b86 calc(288.000deg + 0.1deg), #515b86 312.000deg, #55547e calc(312.000deg + 0.1deg), #55547e 336.000deg, #5c4c75 calc(336.000deg + 0.1deg) 360.000deg)' }}
|
|
|
|
>
|
|
<div className='grow flex flex-col items-center align-middle justify-center h-full w-full'>
|
|
|
|
<div
|
|
className='bg-white/10 w-full h-full lg:h-[90%] lg:w-[90%] m-2 backdrop-blur-lg flex flex-col border border-white/20 shadow-lg'
|
|
>
|
|
|
|
<div className='bg-purple-950 text-white flex justify-evenly'>
|
|
<button className='p-2 grow hover:backdrop-blur-lg hover:bg-white/10'>Room Details</button>
|
|
<button className='p-2 grow hover:backdrop-blur-lg hover:bg-white/10'>Audiance</button>
|
|
<button className='p-2 grow hover:backdrop-blur-lg hover:bg-white/10'>Rules</button>
|
|
<button className='p-2 grow hover:backdrop-blur-lg hover:bg-white/10'>Guest List</button>
|
|
</div>
|
|
<div>
|
|
<input placeholder='Room Name'
|
|
onChange={e => setDetails((d: any) => {
|
|
return { ...d, title: e.target.value }
|
|
})}
|
|
className='text-white w-full border-0 focus:p-2 transition-all focus:border-0' />
|
|
|
|
<button onClick={handleSave} className='text-white'>Save</button>
|
|
<div>
|
|
<label>Image</label>
|
|
<input
|
|
onChange={e => {
|
|
const file = e.target.files![0]
|
|
if (file && file.type.startsWith('image/')) {
|
|
const reader = new FileReader(); // Create a new FileReader instance
|
|
|
|
// Set up the onload event for the reader
|
|
reader.onload = function (e) {
|
|
// e.target.result contains the image data as a Base64 encoded URL (data URL)
|
|
console.log('Image Data URL:', e.target!.result);
|
|
|
|
// You can now set the src of an image tag to this data URL to display it
|
|
setDetails((d: any) => {
|
|
return { ...d, image: e.target!.result }
|
|
})
|
|
// imagePreview.src = e.target.result;
|
|
|
|
// To get pixel data (ImageData object), you would use a canvas element
|
|
// (See "Getting Pixel Data" below)
|
|
};
|
|
|
|
// Read the image file as a Data URL
|
|
reader.readAsDataURL(file);
|
|
} else {
|
|
// imagePreview.src = '#'; // Clear preview if not an image
|
|
console.error('Please select a valid image file.');
|
|
}
|
|
}}
|
|
className='text-white' type='file' name='image' />
|
|
</div>
|
|
<div>
|
|
<label>Colour</label>
|
|
<input
|
|
onChange={e => setDetails((d: any) => {
|
|
return { ...d, color: e.target.value }
|
|
})}
|
|
type='color' name='color' />
|
|
</div>
|
|
{details && <RoomCard
|
|
color={details.color}
|
|
image={details!.image}
|
|
room='TEST'
|
|
title={details.title}
|
|
/>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|