antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-13 07:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

card page template

Browse Source
This commit is contained in:
Anton 2024-01-06 21:00:40 +01:00
parent a8112ee604
commit 767cfef7de
2 changed files with 34 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/Components/Templates/CardPage.tsx
View File

@ -3,8 +3,9 @@ import * as React from "react"
import {TitleCard} from "./TitleCard" import {TitleCard} from "./TitleCard"
export function CardPage({title,children, parent} : { export function CardPage({title, hideTitle, children, parent} : {
title: string, title: string,
hideTitle?: boolean,
children?: React.ReactNode, children?: React.ReactNode,
parent?: {name: string, url: string} parent?: {name: string, url: string}
}) { }) {
@ -20,7 +21,7 @@ export function CardPage({title,children, parent} : {
<li>{title}</li> <li>{title}</li>
</ul> </ul>
</div> </div>
<TitleCard title={title} topMargin="tw-my-2" className=" tw-mb-4"> <TitleCard hideTitle={hideTitle} title={title} topMargin="tw-my-2" className=" tw-mb-4">
{children} {children}
</TitleCard> </TitleCard>
</div> </div>

25
src/Components/Templates/TitleCard.tsx
View File

@ -3,19 +3,22 @@ import * as React from "react"
interface TitleCardProps { interface TitleCardProps {
title: string, title?: string,
children : React.ReactNode, hideTitle?: boolean,
topMargin: string, children?: React.ReactNode,
topMargin?: string,
className?: string, className?: string,
TopSideButtons?: any TopSideButtons?: any
} }
export function TitleCard({title, children, topMargin, TopSideButtons, className} : TitleCardProps){ export function TitleCard({ title,hideTitle, children, topMargin, TopSideButtons, className }: TitleCardProps) {
return( return (
<div className={"tw-card tw-w-full tw-p-6 tw-bg-base-100 tw-shadow-xl tw-h-fit tw-mb-4 " + (className || "") + " " + (topMargin || "tw-mt-6")}> <div className={"tw-card tw-w-full tw-p-6 tw-bg-base-100 tw-shadow-xl tw-h-fit tw-mb-4 " + (className || "") + " " + (topMargin || "tw-mt-6")}>
{/* Title for Card */} {!hideTitle &&
<Subtitle styleClass={TopSideButtons ? "tw-inline-block" : ""}> <>
< Subtitle styleClass={TopSideButtons ? "tw-inline-block" : ""}>
{title} {title}
{/* Top side button, show only if present */} {/* Top side button, show only if present */}
@ -23,14 +26,16 @@ interface TitleCardProps {
TopSideButtons && <div className="tw-inline-block tw-float-right">{TopSideButtons}</div> TopSideButtons && <div className="tw-inline-block tw-float-right">{TopSideButtons}</div>
} }
</Subtitle> </Subtitle>
<div className="tw-divider tw-mt-2"></div> <div className="tw-divider tw-mt-2"></div>
</>
}
{/** Card Body */} {/** Card Body */}
<div className='tw-h-full tw-bg-transparent tw-w-full tw-pb-6 tw-bg-base-100'> <div className='tw-h-full tw-bg-transparent tw-w-full tw-pb-6 tw-bg-base-100'>
{children} {children}
</div> </div>
</div> </div >
) )
} }