feat: implement board background and transparent header

DDD-Community · Nov 2, 2024 · ae3fe88 · ae3fe88
1 parent 14a84ec
commit ae3fe88
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 3 deletions.
diff --git a/src/app/board/[boardId]/page.tsx b/src/app/board/[boardId]/page.tsx
@@ -56,9 +56,14 @@ const BoardPage = async ({ params }: BoardPageProps) => {
 
   const session = await auth()
 
+  const background = `/images/boardThemas/${board.options.THEMA}.png`
+
   return (
     <TutorialProvider>
-      <div className="relative flex h-dvh flex-col bg-gray-50">
+      <div
+        className="relative flex h-dvh flex-col bg-cover"
+        style={{ backgroundImage: `url(${background})` }}
+      >
         <Header
           title={
             <div className="flex items-center justify-center gap-[3px] text-center">
@@ -76,6 +81,8 @@ const BoardPage = async ({ params }: BoardPageProps) => {
               <ShareBtn boardName={board.title} />
             )
           }
+          className="bg-transparent"
+          shadow={false}
         />
         {board.items.length === 0 ? (
           <Empty />

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -1,12 +1,14 @@
 import { ReactNode } from 'react'
 import HeaderBackButton from '@/components/Header/HeaderBackButton'
+import { twMerge } from 'tailwind-merge'
 
 interface HeaderProps {
   title?: ReactNode
   description?: string
   leftButton?: ReactNode
   rightButton?: ReactNode
   shadow?: boolean
+  className?: string
 }
 
 const Header = ({
@@ -15,14 +17,18 @@ const Header = ({
   leftButton = null,
   rightButton = null,
   shadow = true,
+  className = '',
 }: HeaderProps) => {
   return (
     <>
       <header
-        className={`fixed z-10 flex h-16 w-full max-w-md justify-between bg-gray-0 p-5 ${shadow && 'shadow-header'}`}
+        className={twMerge(
+          `fixed z-10 flex h-16 w-full max-w-md justify-between bg-gray-0 p-5 ${shadow && 'shadow-header'}`,
+          className,
+        )}
       >
         <div className="w-6 cursor-pointer">{leftButton}</div>
-        <div className="text-gray-700">
+        <div className="text-gray-900">
           <div className="text-center text-md font-semiBold leading-6">
             {title}
           </div>

diff --git a/src/types/board.ts b/src/types/board.ts
@@ -4,6 +4,9 @@ export interface Board {
   title: string
   items: Polaroid[]
   mine: boolean
+  options: {
+    THEMA: BoardThemaKeyType
+  }
 }
 
 export interface CreateBoardPayload {