111 lines
4.3 KiB
TypeScript
111 lines
4.3 KiB
TypeScript
/*
|
|
* @Author: lrren01
|
|
* @Date: 2024-08-15 09:54:01
|
|
* @LastEditors: lrren01
|
|
* @LastEditTime: 2024-09-18 12:38:45
|
|
* @Description:
|
|
*/
|
|
import { useState, useRef, useContext, useMemo, useEffect } from 'react';
|
|
import Header from "../components/components/Header";
|
|
import ChatInput from "../components/components/chatInput";
|
|
import {SettingContext} from '../components/contexts/SettingContext';
|
|
import {UploadFileContext} from '../components/contexts/UploadFileContext'
|
|
import { useRouter } from 'next/router';
|
|
import classNames from 'classnames';
|
|
import dynamic from "next/dynamic";
|
|
// import Footer from '../components/footer';
|
|
|
|
const baseStyle = {
|
|
outline: "none",
|
|
transition: "border .24s ease-in-out",
|
|
};
|
|
|
|
const focusedStyle = {};
|
|
|
|
const acceptStyle = {
|
|
borderWidth: 2,
|
|
borderRadius: 2,
|
|
borderStyle: "dashed",
|
|
borderColor: "#00e676",
|
|
};
|
|
|
|
const rejectStyle = {
|
|
borderWidth: 2,
|
|
borderRadius: 2,
|
|
borderStyle: "dashed",
|
|
borderColor: "#ff1744",
|
|
};
|
|
|
|
|
|
export default function Dashboard() {
|
|
const { settings, setSettings, setInitCreate } = useContext(SettingContext);
|
|
const { getRootProps,
|
|
isDragAccept,
|
|
isFocused,
|
|
isDragReject,
|
|
setUploadComplete,
|
|
setDataUrls,
|
|
open,
|
|
} = useContext(UploadFileContext);
|
|
const [showAnim, setShowAnim] = useState<boolean>(false);
|
|
const ref = useRef(null);
|
|
const router = useRouter();
|
|
useEffect(() => {
|
|
setUploadComplete(() => {
|
|
setInitCreate(true);
|
|
router.push('/editor/create');
|
|
})
|
|
}, []);
|
|
|
|
const style = useMemo(
|
|
() => ({
|
|
...baseStyle,
|
|
...(isFocused ? focusedStyle : {}),
|
|
...(isDragAccept ? acceptStyle : {}),
|
|
...(isDragReject ? rejectStyle : {}),
|
|
}),
|
|
[isFocused, isDragAccept, isDragReject]
|
|
);
|
|
|
|
useEffect(() => {
|
|
// Prefetch the dashboard page
|
|
router.prefetch('/editor/create')
|
|
}, [router])
|
|
|
|
|
|
return (
|
|
<div
|
|
{...getRootProps({ })}
|
|
className="dark:bg-black dark:text-white h-full"
|
|
>
|
|
<div className='fixed w-full bg-slate-50 z-20 top-0'>
|
|
<Header />
|
|
</div>
|
|
<main className='pb-10'>
|
|
<div className="w-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center justify-between p-3">
|
|
<div className="flex relative flex-col w-full items-center px-6">
|
|
<ChatInput
|
|
showAnim={showAnim}
|
|
/>
|
|
</div>
|
|
<p
|
|
className={classNames(
|
|
"mt-20 flex justify-center items-center p-4 rounded border-2 ",
|
|
{ 'border-white': !isDragAccept,
|
|
'border-dashed border-blue-600': isDragAccept,
|
|
}
|
|
)}
|
|
>
|
|
<span className='mr-2'>
|
|
<svg className="icon text-blue-600 w-[35px] h-[35px] fill-current" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5831"><path d="M597.333333 256h85.333334v85.333333h213.333333a42.666667 42.666667 0 0 1 42.666667 42.666667v320L682.666667 554.666667l1.536 343.978666 94.848-91.733333L855.082667 938.666667H384a42.666667 42.666667 0 0 1-42.666667-42.666667v-213.333333H256v-85.333334h85.333333V384a42.666667 42.666667 0 0 1 42.666667-42.666667h213.333333V256z m341.333334 483.754667V896a42.666667 42.666667 0 0 1-2.048 13.098667l-83.626667-144.810667L938.666667 739.754667zM170.666667 597.333333v85.333334H85.333333v-85.333334h85.333334z m0-170.666666v85.333333H85.333333v-85.333333h85.333334z m0-170.666667v85.333333H85.333333V256h85.333334z m0-170.666667v85.333334H85.333333V85.333333h85.333334z m170.666666 0v85.333334H256V85.333333h85.333333z m170.666667 0v85.333334h-85.333333V85.333333h85.333333z m170.666667 0v85.333334h-85.333334V85.333333h85.333334z" p-id="5832"></path></svg>
|
|
</span>
|
|
Support Drag & drop a screenshot
|
|
</p>
|
|
</div>
|
|
{/* <div className='mt-6'>
|
|
<Footer />
|
|
</div> */}
|
|
</main>
|
|
</div>
|
|
);
|
|
} |