58 lines
2.1 KiB
TypeScript
58 lines
2.1 KiB
TypeScript
import { cloneElement } from 'react'
|
|
import Avatar from '@/components/ui/Avatar'
|
|
import Logo from '@/components/template/Logo'
|
|
import { APP_NAME } from '@/constants/app.constant'
|
|
import type { CommonProps } from '@/@types/common'
|
|
import { useLocalization } from '@/utils/hooks/useLocalization'
|
|
|
|
interface SideProps extends CommonProps {
|
|
content?: React.ReactNode
|
|
}
|
|
|
|
const Side = ({ children, content, ...rest }: SideProps) => {
|
|
const { translate } = useLocalization()
|
|
|
|
return (
|
|
<div className="grid lg:grid-cols-3 h-full">
|
|
<div
|
|
className="relative bg-no-repeat bg-cover py-6 px-16 flex-col justify-between hidden lg:flex"
|
|
style={{
|
|
backgroundImage: `url('/img/others/auth-side-bg.jpg')`,
|
|
}}
|
|
>
|
|
<div className="absolute inset-0 bg-black bg-opacity-50 z-0"></div>
|
|
<div className="relative z-10 flex flex-col h-full justify-between">
|
|
<Logo className="drop-shadow-md" />
|
|
<div>
|
|
<div className="mb-6 flex items-center gap-4">
|
|
<Avatar className="border-2 border-white" shape="circle" src="/img/others/cto.png" />
|
|
<div className="text-white">
|
|
<div className="font-semibold text-base">Sedat ÖZTÜRK</div>
|
|
<span className="opacity-80">{ translate('::LoginPanel.Profil')}</span>
|
|
</div>
|
|
</div>
|
|
<p className="text-lg text-white opacity-80">
|
|
{ translate('::LoginPanel.Message')}
|
|
</p>
|
|
</div>
|
|
<span className="text-white">
|
|
Copyright © {`${new Date().getFullYear()}`}{' '}
|
|
<span className="font-semibold">{`${APP_NAME}`}</span>{' '}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="col-span-2 flex flex-col justify-start sm:justify-center items-center bg-white dark:bg-gray-800">
|
|
<div className="w-full xl:max-w-[450px] px-8 max-w-[380px]">
|
|
<div className="mb-8">{content}</div>
|
|
{children
|
|
? cloneElement(children as React.ReactElement, {
|
|
...rest,
|
|
})
|
|
: null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Side
|