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"
export function CardPage({title,children, parent} : {
export function CardPage({title, hideTitle, children, parent} : {
title: string,
hideTitle?: boolean,
children?: React.ReactNode,
parent?: {name: string, url: string}
}) {
@ -20,7 +21,7 @@ export function CardPage({title,children, parent} : {
<li>{title}</li>
</ul>
</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}
</TitleCard>
</div>

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

@ -3,34 +3,39 @@ import * as React from "react"
interface TitleCardProps {
title: string,
children : React.ReactNode,
topMargin: string,
title?: string,
hideTitle?: boolean,
children?: React.ReactNode,
topMargin?: string,
className?: string,
TopSideButtons?: any
}
export function TitleCard({title, children, topMargin, TopSideButtons, className} : TitleCardProps){
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")}>
{/* Title for Card */}
<Subtitle styleClass={TopSideButtons ? "tw-inline-block" : ""}>
{title}
export function TitleCard({ title,hideTitle, children, topMargin, TopSideButtons, className }: TitleCardProps) {
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")}>
{/* Top side button, show only if present */}
{
TopSideButtons && <div className="tw-inline-block tw-float-right">{TopSideButtons}</div>
}
</Subtitle>
<div className="tw-divider tw-mt-2"></div>
{/** Card Body */}
<div className='tw-h-full tw-bg-transparent tw-w-full tw-pb-6 tw-bg-base-100'>
{children}
</div>
</div>
)
}
{!hideTitle &&
<>
< Subtitle styleClass={TopSideButtons ? "tw-inline-block" : ""}>
{title}
{/* Top side button, show only if present */}
{
TopSideButtons && <div className="tw-inline-block tw-float-right">{TopSideButtons}</div>
}
</Subtitle>
<div className="tw-divider tw-mt-2"></div>
</>
}
{/** Card Body */}
<div className='tw-h-full tw-bg-transparent tw-w-full tw-pb-6 tw-bg-base-100'>
{children}
</div>
</div >
)
}