feat(boards): add button to empty board page (#1643)

* feat(BoardTable): add button to empty board page

* fix(board): send button as function parameter to IllustrationBoard

* chore(boards): add children as prop to IllustratedInfo

* chore(boards): make children-parameter optional in IllustratedInfo

tavla/app/(admin)/boards/components/BoardTable/index.tsx

@@ -4,6 +4,10 @@ import { TableRows } from 'app/(admin)/boards/components/TableRows'
 import { TBoardWithOrganizaion } from 'types/settings'
 import { isEmpty } from 'lodash'
 import { IllustratedInfo } from 'app/(admin)/components/IllustratedInfo'
+import { PrimaryButton } from '@entur/button'
+import Link from 'next/link'
+import { AddIcon } from '@entur/icons'
+import { CreateBoard } from 'app/(admin)/components/CreateBoard'
 
 function BoardTable({
     boardsWithOrg,
@@ -15,7 +19,11 @@ function BoardTable({
             <IllustratedInfo
                 title="Her var det tomt"
                 description="Du har ikke laget noen tavler ennå"
-            />
+            >
+                <PrimaryButton as={Link} href="?board">
+                    Opprett tavle <AddIcon /> <CreateBoard />
+                </PrimaryButton>
+            </IllustratedInfo>
         )
 
     return (

tavla/app/(admin)/components/IllustratedInfo/index.tsx

@@ -5,15 +5,18 @@ import { Heading2, LeadParagraph } from '@entur/typography'
 function IllustratedInfo({
     title,
     description,
+    children,
 }: {
     title: string
     description: string
+    children?: React.ReactNode
 }) {
     return (
         <div className="flex flex-col items-center bg-secondary rounded pb-16">
             <Image src={animals} aria-hidden="true" alt="" />
             <Heading2 className="my-4">{title}</Heading2>
             <LeadParagraph margin="bottom">{description}</LeadParagraph>
+            {children}
         </div>
     )
 }