layout.tsx46 lines · main
| 1 | import Image from 'next/image' |
| 2 | import { PropsWithChildren, ReactNode } from 'react' |
| 3 | import { cn, Separator } from 'ui' |
| 4 | |
| 5 | import { UserDropdown } from '@/components/interfaces/UserDropdown' |
| 6 | import { FeedbackDropdown } from '@/components/layouts/Navigation/LayoutHeader/FeedbackDropdown/FeedbackDropdown' |
| 7 | import { BASE_PATH } from '@/lib/constants' |
| 8 | |
| 9 | export const ProjectClaimLayout = ({ |
| 10 | children, |
| 11 | title, |
| 12 | className, |
| 13 | }: PropsWithChildren<{ |
| 14 | title: ReactNode |
| 15 | className?: string |
| 16 | }>) => { |
| 17 | return ( |
| 18 | <> |
| 19 | <div className="flex flex-row justify-between mx-auto w-full h-[52px] items-center px-4"> |
| 20 | <div className="flex items-center gap-2"> |
| 21 | <span className="sr-only">Briven</span> |
| 22 | <Image |
| 23 | src={`${BASE_PATH}/img/briven-logo.svg`} |
| 24 | alt="Briven Logo" |
| 25 | height={20} |
| 26 | width={20} |
| 27 | /> |
| 28 | <span className="truncate">{title}</span> |
| 29 | </div> |
| 30 | <div className="flex items-center gap-x-2"> |
| 31 | <FeedbackDropdown className="hidden xs:flex" /> |
| 32 | <UserDropdown /> |
| 33 | </div> |
| 34 | </div> |
| 35 | <Separator /> |
| 36 | <div |
| 37 | className={cn( |
| 38 | 'overflow-y-auto max-h-[calc(100vh-70px)] flex justify-center grow', |
| 39 | className |
| 40 | )} |
| 41 | > |
| 42 | <div className="w-full h-full max-w-md">{children}</div> |
| 43 | </div> |
| 44 | </> |
| 45 | ) |
| 46 | } |