Updated layout to use Daisy and Tailwind
This commit is contained in:
Moira Daniella A Sebastian
@@ -1,134 +1,142 @@
|
||||
package components
|
||||
|
||||
templ Layout(props LayoutProps){
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>{props.Title}</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||||
<meta name="description" content={props.Description}>
|
||||
@Head(props.Head)
|
||||
</head>
|
||||
<body style="margin:0;padding:0;background:#f5f5f5;color:#111;font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;">
|
||||
@Header(props.Header)
|
||||
<main style="padding:16px;background:#ffffff;">
|
||||
{ children... }
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
templ Layout(props LayoutProps) {
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-theme="corporate">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<title>{ props.Title }</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"/>
|
||||
<meta name="description" content={ props.Description }/>
|
||||
@Head(props.Head)
|
||||
</head>
|
||||
<body class="min-h-screen bg-base-200 text-base-content">
|
||||
@Header(props.Header)
|
||||
<main class="p-4 bg-base-100 min-h-[calc(100vh-4rem)]">
|
||||
{ children... }
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
}
|
||||
|
||||
type LayoutProps struct {
|
||||
Title string
|
||||
Description string
|
||||
Head HeadProps
|
||||
Header HeaderProps
|
||||
Footer FooterProps
|
||||
}
|
||||
|
||||
templ Head(props HeadProps){
|
||||
for _, link := range props.Links {
|
||||
<link href={ link.Href } rel={ link.Rel }>
|
||||
}
|
||||
|
||||
for _, script := range props.Scripts {
|
||||
<script src={ script.Src } defer={ script.Defer }></script>
|
||||
}
|
||||
Title string
|
||||
Description string
|
||||
Head HeadProps
|
||||
Header HeaderProps
|
||||
Footer FooterProps
|
||||
}
|
||||
|
||||
type HeadProps struct {
|
||||
Links []Link
|
||||
Scripts []Script
|
||||
Links []Link
|
||||
Scripts []Script
|
||||
}
|
||||
|
||||
type Link struct {
|
||||
Href string
|
||||
Rel string
|
||||
Href string
|
||||
Rel string
|
||||
}
|
||||
|
||||
type Script struct {
|
||||
Src string
|
||||
Defer bool
|
||||
Src string
|
||||
Defer bool
|
||||
}
|
||||
|
||||
templ Header(props HeaderProps){
|
||||
@Topbar(){
|
||||
@TopbarBrand(props.BrandName)
|
||||
@TopbarCreateButton(props.CreateLabel, props.CreateHref)
|
||||
@TopbarSpacer()
|
||||
@TopbarSearch(props.SearchPlaceholder)
|
||||
@TopbarSpacer()
|
||||
@TopbarActions(){
|
||||
@TopbarIconButton("Notifications"){ @IconBell() }
|
||||
@TopbarIconButton("User menu"){ @IconUser() }
|
||||
}
|
||||
}
|
||||
templ Head(props HeadProps) {
|
||||
for _, link := range props.Links {
|
||||
<link href={ link.Href } rel={ link.Rel }/>
|
||||
}
|
||||
for _, script := range props.Scripts {
|
||||
<script src={ script.Src } defer={ script.Defer }></script>
|
||||
}
|
||||
}
|
||||
|
||||
templ Topbar(){
|
||||
<header style="position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px;height:48px;padding:0 20px;background:#0969da;color:#fff;flex-shrink:0;">
|
||||
{ children... }
|
||||
</header>
|
||||
templ Header(props HeaderProps) {
|
||||
@Topbar() {
|
||||
<div class="navbar-start gap-4">
|
||||
@TopbarBrand(props.BrandName)
|
||||
@TopbarCreateButton(props.CreateLabel, props.CreateHref)
|
||||
</div>
|
||||
<div class="navbar-center flex-1 min-w-[32rem] max-w-4xl mx-auto px-2">
|
||||
@TopbarSearch(props.SearchPlaceholder)
|
||||
</div>
|
||||
<div class="navbar-end">
|
||||
@TopbarIconButton("Notifications") {
|
||||
@IconBell()
|
||||
}
|
||||
@TopbarIconButton("User menu") {
|
||||
@IconUser()
|
||||
}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
templ TopbarBrand(brandName string){
|
||||
<span style="font-weight:600;font-size:15px;white-space:nowrap;">{ brandName }</span>
|
||||
templ Topbar() {
|
||||
<header class="navbar sticky top-0 z-10 bg-primary text-primary-content shadow-sm min-h-12 px-6">
|
||||
{ children... }
|
||||
</header>
|
||||
}
|
||||
|
||||
templ TopbarCreateButton(label string, href string){
|
||||
if href != "" {
|
||||
<a href={ href } style="padding:6px 12px;font-size:13px;background:#fff;color:#0969da;border:none;border-radius:4px;cursor:pointer;text-decoration:none;display:inline-block;">{ label }</a>
|
||||
} else {
|
||||
<button type="button" style="padding:6px 12px;font-size:13px;background:#fff;color:#0969da;border:none;border-radius:4px;cursor:pointer;">{ label }</button>
|
||||
}
|
||||
templ TopbarLeft() {
|
||||
<div class="navbar-start">
|
||||
{ children... }
|
||||
</div>
|
||||
}
|
||||
|
||||
templ TopbarSpacer(){
|
||||
<div style="flex:1;min-width:0;"></div>
|
||||
templ TopbarBrand(brandName string) {
|
||||
<span class="font-semibold text-base whitespace-nowrap">{ brandName }</span>
|
||||
}
|
||||
|
||||
templ TopbarSearch(placeholder string){
|
||||
<input type="search" placeholder={ placeholder } aria-label="Search" style="width:100%;max-width:280px;padding:6px 10px;font-size:13px;border:1px solid rgba(255,255,255,0.5);border-radius:4px;background:rgba(255,255,255,0.2);color:#fff;">
|
||||
templ TopbarCreateButton(label string, href string) {
|
||||
if href != "" {
|
||||
<a href={ href } class="btn btn-sm bg-base-100 text-primary border-none hover:opacity-90 rounded-btn">{ label }</a>
|
||||
} else {
|
||||
<button type="button" class="btn btn-sm bg-base-100 text-primary border-none hover:opacity-90 rounded-btn">{ label }</button>
|
||||
}
|
||||
}
|
||||
|
||||
templ TopbarActions(){
|
||||
<div style="flex:0 0 auto;display:flex;align-items:center;gap:4px;margin-left:12px;">
|
||||
{ children... }
|
||||
</div>
|
||||
templ TopbarCenter() {
|
||||
<div class="navbar-center">
|
||||
{ children... }
|
||||
</div>
|
||||
}
|
||||
|
||||
templ TopbarIconButton(ariaLabel string){
|
||||
<button type="button" aria-label={ariaLabel} style="width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;color:#fff;">
|
||||
{ children... }
|
||||
</button>
|
||||
templ TopbarSearch(placeholder string) {
|
||||
<input
|
||||
type="search"
|
||||
placeholder={ placeholder }
|
||||
aria-label="Search"
|
||||
class="input input-md w-full bg-base-100 text-base-content placeholder-opacity-90 border border-base-content/20"
|
||||
/>
|
||||
}
|
||||
|
||||
templ IconBell(){
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
||||
templ TopbarRight() {
|
||||
<div class="navbar-end">
|
||||
{ children... }
|
||||
</div>
|
||||
}
|
||||
|
||||
templ IconUser(){
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
||||
templ TopbarIconButton(ariaLabel string) {
|
||||
<button type="button" aria-label={ ariaLabel } class="btn btn-ghost btn-sm btn-square text-primary-content hover:bg-primary-content/20">
|
||||
{ children... }
|
||||
</button>
|
||||
}
|
||||
|
||||
type HeaderProps struct {
|
||||
BrandName string
|
||||
CreateLabel string
|
||||
CreateHref string
|
||||
SearchPlaceholder string
|
||||
Routes []NavRoute
|
||||
BrandName string
|
||||
CreateLabel string
|
||||
CreateHref string
|
||||
SearchPlaceholder string
|
||||
Routes []NavRoute
|
||||
}
|
||||
|
||||
type NavRoute struct {
|
||||
Name string
|
||||
Path string
|
||||
Name string
|
||||
Path string
|
||||
}
|
||||
|
||||
templ Footer(props FooterProps){
|
||||
|
||||
templ Footer(props FooterProps) {
|
||||
}
|
||||
|
||||
type FooterProps struct {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user