H0llyW00dzZ/templui
H0llyW00dzZ/templui
1
0
Fork 0
mirror of https://github.com/axzilla/templui.git synced 2025-02-21 21:52:40 +00:00
Code

refactor: use own icon component as svg replacement, fix darkmode on datepicker component

Browse Source
This commit is contained in:
“axzilla” 2024-10-10 10:35:49 +02:00
parent 27e3383e77
commit 73ff309dc7
14 changed files with 116 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
assets/css/output.css
View File

@ -1291,6 +1291,15 @@ body {
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-popover {
--tw-bg-opacity: 1;
background-color: hsl(var(--popover) / var(--tw-bg-opacity));
}
.bg-primary\/90 {
background-color: hsl(var(--primary) / 0.9);
}
.bg-opacity-50 {
--tw-bg-opacity: 0.5;
}
@ -1603,6 +1612,16 @@ body {
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.text-accent-foreground {
--tw-text-opacity: 1;
color: hsl(var(--accent-foreground) / var(--tw-text-opacity));
}
.text-popover-foreground {
--tw-text-opacity: 1;
color: hsl(var(--popover-foreground) / var(--tw-text-opacity));
}
.underline {
text-decoration-line: underline;
}

12
internals/ui/showcase/alert.templ
View File

@ -2,14 +2,6 @@ package showcase
import "github.com/axzilla/goilerplate/pkg/components"
templ RocketIcon() {
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4"><path d="M6.85357 3.85355L7.65355 3.05353C8.2981 2.40901 9.42858 1.96172 10.552 1.80125C11.1056 1.72217 11.6291 1.71725 12.0564 1.78124C12.4987 1.84748 12.7698 1.97696 12.8965 2.10357C13.0231 2.23018 13.1526 2.50125 13.2188 2.94357C13.2828 3.37086 13.2779 3.89439 13.1988 4.44801C13.0383 5.57139 12.591 6.70188 11.9464 7.34645L7.49999 11.7929L6.35354 10.6465C6.15827 10.4512 5.84169 10.4512 5.64643 10.6465C5.45117 10.8417 5.45117 11.1583 5.64643 11.3536L7.14644 12.8536C7.34171 13.0488 7.65829 13.0488 7.85355 12.8536L8.40073 12.3064L9.57124 14.2572C9.65046 14.3893 9.78608 14.4774 9.9389 14.4963C10.0917 14.5151 10.2447 14.4624 10.3535 14.3536L12.3535 12.3536C12.4648 12.2423 12.5172 12.0851 12.495 11.9293L12.0303 8.67679L12.6536 8.05355C13.509 7.19808 14.0117 5.82855 14.1887 4.58943C14.2784 3.9618 14.2891 3.33847 14.2078 2.79546C14.1287 2.26748 13.9519 1.74482 13.6035 1.39645C13.2552 1.04809 12.7325 0.871332 12.2045 0.792264C11.6615 0.710945 11.0382 0.721644 10.4105 0.8113C9.17143 0.988306 7.80189 1.491 6.94644 2.34642L6.32322 2.96968L3.07071 2.50504C2.91492 2.48278 2.75773 2.53517 2.64645 2.64646L0.646451 4.64645C0.537579 4.75533 0.484938 4.90829 0.50375 5.0611C0.522563 5.21391 0.61073 5.34954 0.742757 5.42876L2.69364 6.59928L2.14646 7.14645C2.0527 7.24022 2.00002 7.3674 2.00002 7.50001C2.00002 7.63261 2.0527 7.75979 2.14646 7.85356L3.64647 9.35356C3.84173 9.54883 4.15831 9.54883 4.35357 9.35356C4.54884 9.1583 4.54884 8.84172 4.35357 8.64646L3.20712 7.50001L3.85357 6.85356L6.85357 3.85355ZM10.0993 13.1936L9.12959 11.5775L11.1464 9.56067L11.4697 11.8232L10.0993 13.1936ZM3.42251 5.87041L5.43935 3.85356L3.17678 3.53034L1.80638 4.90074L3.42251 5.87041ZM2.35356 10.3535C2.54882 10.1583 2.54882 9.8417 2.35356 9.64644C2.1583 9.45118 1.84171 9.45118 1.64645 9.64644L0.646451 10.6464C0.451188 10.8417 0.451188 11.1583 0.646451 11.3535C0.841713 11.5488 1.1583 11.5488 1.35356 11.3535L2.35356 10.3535ZM3.85358 11.8536C4.04884 11.6583 4.04885 11.3417 3.85359 11.1465C3.65833 10.9512 3.34175 10.9512 3.14648 11.1465L1.14645 13.1464C0.95119 13.3417 0.951187 13.6583 1.14645 13.8535C1.34171 14.0488 1.65829 14.0488 1.85355 13.8536L3.85358 11.8536ZM5.35356 13.3535C5.54882 13.1583 5.54882 12.8417 5.35356 12.6464C5.1583 12.4512 4.84171 12.4512 4.64645 12.6464L3.64645 13.6464C3.45119 13.8417 3.45119 14.1583 3.64645 14.3535C3.84171 14.5488 4.1583 14.5488 4.35356 14.3535L5.35356 13.3535ZM9.49997 6.74881C10.1897 6.74881 10.7488 6.1897 10.7488 5.5C10.7488 4.8103 10.1897 4.25118 9.49997 4.25118C8.81026 4.25118 8.25115 4.8103 8.25115 5.5C8.25115 6.1897 8.81026 6.74881 9.49997 6.74881Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
}
templ WarningIcon() {
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4"><path d="M8.4449 0.608765C8.0183 -0.107015 6.9817 -0.107015 6.55509 0.608766L0.161178 11.3368C-0.275824 12.07 0.252503 13 1.10608 13H13.8939C14.7475 13 15.2758 12.07 14.8388 11.3368L8.4449 0.608765ZM7.4141 1.12073C7.45288 1.05566 7.54712 1.05566 7.5859 1.12073L13.9798 11.8488C14.0196 11.9154 13.9715 12 13.8939 12H1.10608C1.02849 12 0.980454 11.9154 1.02018 11.8488L7.4141 1.12073ZM6.8269 4.48611C6.81221 4.10423 7.11783 3.78663 7.5 3.78663C7.88217 3.78663 8.18778 4.10423 8.1731 4.48612L8.01921 8.48701C8.00848 8.766 7.7792 8.98664 7.5 8.98664C7.2208 8.98664 6.99151 8.766 6.98078 8.48701L6.8269 4.48611ZM8.24989 10.476C8.24989 10.8902 7.9141 11.226 7.49989 11.226C7.08567 11.226 6.74989 10.8902 6.74989 10.476C6.74989 10.0618 7.08567 9.72599 7.49989 9.72599C7.9141 9.72599 8.24989 10.0618 8.24989 10.476Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
}
templ AlertShowcase() {
<div class="flex justify-center items-center border rounded-md py-16 px-4">
<div class="space-y-4 max-w-md w-full">
@ -17,7 +9,7 @@ templ AlertShowcase() {
<h2 class="font-semibold mb-2">Default Alert</h2>
<div class="space-y-2">
@components.Alert(components.AlertProps{Variant: components.DefaultAlert}) {
@RocketIcon()
@components.Icon(components.IconProps{Name: "rocket", Size: "16"})
@components.AlertTitle() {
Note
}
@ -31,7 +23,7 @@ templ AlertShowcase() {
<h2 class="font-semibold mb-2">Destructive Alert</h2>
<div class="space-y-2">
@components.Alert(components.AlertProps{Variant: components.DestructiveAlert}) {
@WarningIcon()
@components.Icon(components.IconProps{Name: "triangle-alert", Size: "16"})
@components.AlertTitle() {
Error
}

49
internals/ui/showcase/button.templ
View File

@ -23,20 +23,7 @@ templ ButtonShowcase() {
@components.Button(components.ButtonProps{Text: "Small", Size: components.Sm})
@components.Button(components.ButtonProps{Text: "Large", Size: components.Lg})
@components.Button(components.ButtonProps{Size: components.ButtonIcon}) {
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="h-4 w-4"
>
<path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path>
</svg>
@components.Icon(components.IconProps{Name: "rocket", Size: "16"})
}
</div>
</div>
@ -56,39 +43,13 @@ templ ButtonShowcase() {
<div class="mb-8">
<h2 class="font-semibold mb-2">With Icon</h2>
<div class="flex flex-wrap gap-2">
@components.Button(components.ButtonProps{}) {
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="mr-2 h-4 w-4"
>
<path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"></path>
</svg>
@components.Button(components.ButtonProps{Class: "flex gap-2"}) {
@components.Icon(components.IconProps{Name: "rocket", Size: "16"})
Icon Left
}
@components.Button(components.ButtonProps{}) {
@components.Button(components.ButtonProps{Class: "flex gap-2"}) {
Icon Right
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="ml-2 h-4 w-4"
>
<path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"></path>
</svg>
@components.Icon(components.IconProps{Name: "rocket", Size: "16"})
}
</div>
</div>

4
pkg/components/accordion.templ
View File

@ -76,9 +76,7 @@ templ Accordion(props AccordionProps) {
:aria-expanded={ "activeItem === '" + item.ID + "'" }
>
@item.Trigger
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 shrink-0 transition-transform duration-200">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
@Icon(IconProps{Name: "chevron-down", Size: "16"})
</button>
</h3>
<div

8
pkg/components/accordion_templ.go
View File

@ -149,14 +149,18 @@ func Accordion(props AccordionProps) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"h-4 w-4 shrink-0 transition-transform duration-200\"><polyline points=\"6 9 12 15 18 9\"></polyline></svg></button></h3><div x-show=\"")
templ_7745c5c3_Err = Icon(IconProps{Name: "chevron-down", Size: "16"}).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</button></h3><div x-show=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var6 string
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs("activeItem === '" + item.ID + "'")
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/accordion.templ`, Line: 85, Col: 48}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/accordion.templ`, Line: 83, Col: 48}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
if templ_7745c5c3_Err != nil {

29
pkg/components/datepicker.templ
View File

@ -24,6 +24,7 @@ type DatepickerProps struct {
// Datepicker renders an enhanced datepicker component with an input field and a calendar view.
// It uses Alpine.js for interactivity and provides various formatting options and improved navigation.
// This version supports dark mode using Tailwind CSS variables.
//
// Usage:
//
@ -151,41 +152,41 @@ templ Datepicker(props DatepickerProps) {
x-model="datePickerValue"
@click="datePickerOpen = !datePickerOpen"
x-on:keydown.escape="datePickerOpen = false"
class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
readonly
{ props.Attributes... }
/>
<div
@click="datePickerOpen = !datePickerOpen"
class="absolute top-0 right-0 px-3 py-2 cursor-pointer text-neutral-400 hover:text-neutral-500"
class="absolute top-0 right-0 px-3 py-2 cursor-pointer text-muted-foreground hover:text-foreground"
>
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
@Icon(IconProps{Name: "calendar"})
</div>
</div>
<div
x-show="datePickerOpen"
x-transition
@click.away="datePickerOpen = false"
class="absolute top-0 left-0 max-w-lg p-4 mt-12 antialiased bg-white border rounded-lg shadow w-[17rem] border-neutral-200/70"
class="absolute top-0 left-0 max-w-lg p-4 mt-12 antialiased bg-popover text-popover-foreground border rounded-lg shadow w-[17rem] border-border"
>
<div class="flex items-center justify-between mb-2">
<div>
<span x-text="datePickerMonthNames[datePickerMonth]" class="text-lg font-bold text-gray-800"></span>
<span x-text="datePickerYear" class="ml-1 text-lg font-normal text-gray-600"></span>
<span x-text="datePickerMonthNames[datePickerMonth]" class="text-lg font-bold"></span>
<span x-text="datePickerYear" class="ml-1 text-lg font-normal text-muted-foreground"></span>
</div>
<div>
<button @click="datePickerPreviousMonth()" type="button" class="inline-flex p-1 transition duration-100 ease-in-out rounded-full cursor-pointer focus:outline-none focus:shadow-outline hover:bg-gray-100">
<svg class="inline-flex w-6 h-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
<button @click="datePickerPreviousMonth()" type="button" class="inline-flex p-1 transition duration-100 ease-in-out rounded-full cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground">
@Icon(IconProps{Name: "chevron-left", Size: "16", Class: "text-muted-foreground"})
</button>
<button @click="datePickerNextMonth()" type="button" class="inline-flex p-1 transition duration-100 ease-in-out rounded-full cursor-pointer focus:outline-none focus:shadow-outline hover:bg-gray-100">
<svg class="inline-flex w-6 h-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
<button @click="datePickerNextMonth()" type="button" class="inline-flex p-1 transition duration-100 ease-in-out rounded-full cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground">
@Icon(IconProps{Name: "chevron-right", Size: "16", Class: "text-muted-foreground"})
</button>
</div>
</div>
<div class="grid grid-cols-7 mb-3">
<template x-for="(day, index) in datePickerDays" :key="index">
<div class="px-0.5">
<div x-text="day" class="text-xs font-medium text-center text-gray-800"></div>
<div x-text="day" class="text-xs font-medium text-center text-muted-foreground"></div>
</div>
</template>
</div>
@ -199,9 +200,9 @@ templ Datepicker(props DatepickerProps) {
x-text="day"
@click="datePickerDayClicked(day)"
:class="{
'bg-neutral-200': datePickerIsToday(day) == true,
'text-gray-600 hover:bg-neutral-200': datePickerIsToday(day) == false && datePickerIsSelectedDate(day) == false,
'bg-neutral-800 text-white hover:bg-opacity-75': datePickerIsSelectedDate(day) == true
'bg-muted text-muted-foreground': datePickerIsToday(day) == true,
'text-foreground hover:bg-accent hover:text-accent-foreground': datePickerIsToday(day) == false && datePickerIsSelectedDate(day) == false,
'bg-primary text-primary-foreground hover:bg-primary/90': datePickerIsSelectedDate(day) == true
}"
class="flex items-center justify-center text-sm leading-none text-center rounded-full cursor-pointer h-7 w-7"
></div>

37
pkg/components/datepicker_templ.go
View File

@ -32,6 +32,7 @@ type DatepickerProps struct {
// Datepicker renders an enhanced datepicker component with an input field and a calendar view.
// It uses Alpine.js for interactivity and provides various formatting options and improved navigation.
// This version supports dark mode using Tailwind CSS variables.
//
// Usage:
//
@ -83,7 +84,7 @@ func Datepicker(props DatepickerProps) templ.Component {
var templ_7745c5c3_Var3 string
templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(props.Format)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/datepicker.templ`, Line: 47, Col: 33}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/datepicker.templ`, Line: 48, Col: 33}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
if templ_7745c5c3_Err != nil {
@ -109,7 +110,7 @@ func Datepicker(props DatepickerProps) templ.Component {
var templ_7745c5c3_Var5 string
templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(props.ID)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/datepicker.templ`, Line: 148, Col: 17}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/datepicker.templ`, Line: 149, Col: 17}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
if templ_7745c5c3_Err != nil {
@ -122,7 +123,7 @@ func Datepicker(props DatepickerProps) templ.Component {
var templ_7745c5c3_Var6 string
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(props.Name)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/datepicker.templ`, Line: 149, Col: 21}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/datepicker.templ`, Line: 150, Col: 21}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
if templ_7745c5c3_Err != nil {
@ -135,13 +136,13 @@ func Datepicker(props DatepickerProps) templ.Component {
var templ_7745c5c3_Var7 string
templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(props.Placeholder)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/datepicker.templ`, Line: 150, Col: 35}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/components/datepicker.templ`, Line: 151, Col: 35}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" x-model=\"datePickerValue\" @click=\"datePickerOpen = !datePickerOpen\" x-on:keydown.escape=\"datePickerOpen = false\" class=\"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\" readonly")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" x-model=\"datePickerValue\" @click=\"datePickerOpen = !datePickerOpen\" x-on:keydown.escape=\"datePickerOpen = false\" class=\"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\" readonly")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -149,7 +150,31 @@ func Datepicker(props DatepickerProps) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("><div @click=\"datePickerOpen = !datePickerOpen\" class=\"absolute top-0 right-0 px-3 py-2 cursor-pointer text-neutral-400 hover:text-neutral-500\"><svg class=\"w-6 h-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\"></path></svg></div></div><div x-show=\"datePickerOpen\" x-transition @click.away=\"datePickerOpen = false\" class=\"absolute top-0 left-0 max-w-lg p-4 mt-12 antialiased bg-white border rounded-lg shadow w-[17rem] border-neutral-200/70\"><div class=\"flex items-center justify-between mb-2\"><div><span x-text=\"datePickerMonthNames[datePickerMonth]\" class=\"text-lg font-bold text-gray-800\"></span> <span x-text=\"datePickerYear\" class=\"ml-1 text-lg font-normal text-gray-600\"></span></div><div><button @click=\"datePickerPreviousMonth()\" type=\"button\" class=\"inline-flex p-1 transition duration-100 ease-in-out rounded-full cursor-pointer focus:outline-none focus:shadow-outline hover:bg-gray-100\"><svg class=\"inline-flex w-6 h-6 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\"></path></svg></button> <button @click=\"datePickerNextMonth()\" type=\"button\" class=\"inline-flex p-1 transition duration-100 ease-in-out rounded-full cursor-pointer focus:outline-none focus:shadow-outline hover:bg-gray-100\"><svg class=\"inline-flex w-6 h-6 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"></path></svg></button></div></div><div class=\"grid grid-cols-7 mb-3\"><template x-for=\"(day, index) in datePickerDays\" :key=\"index\"><div class=\"px-0.5\"><div x-text=\"day\" class=\"text-xs font-medium text-center text-gray-800\"></div></div></template></div><div class=\"grid grid-cols-7\"><template x-for=\"blankDay in datePickerBlankDaysInMonth\"><div class=\"p-1 text-sm text-center border border-transparent\"></div></template><template x-for=\"(day, dayIndex) in datePickerDaysInMonth\" :key=\"dayIndex\"><div class=\"px-0.5 mb-1 aspect-square\"><div x-text=\"day\" @click=\"datePickerDayClicked(day)\" :class=\"{\n &#39;bg-neutral-200&#39;: datePickerIsToday(day) == true, \n &#39;text-gray-600 hover:bg-neutral-200&#39;: datePickerIsToday(day) == false &amp;&amp; datePickerIsSelectedDate(day) == false,\n &#39;bg-neutral-800 text-white hover:bg-opacity-75&#39;: datePickerIsSelectedDate(day) == true\n }\" class=\"flex items-center justify-center text-sm leading-none text-center rounded-full cursor-pointer h-7 w-7\"></div></div></template></div></div></div>")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("><div @click=\"datePickerOpen = !datePickerOpen\" class=\"absolute top-0 right-0 px-3 py-2 cursor-pointer text-muted-foreground hover:text-foreground\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = Icon(IconProps{Name: "calendar"}).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div x-show=\"datePickerOpen\" x-transition @click.away=\"datePickerOpen = false\" class=\"absolute top-0 left-0 max-w-lg p-4 mt-12 antialiased bg-popover text-popover-foreground border rounded-lg shadow w-[17rem] border-border\"><div class=\"flex items-center justify-between mb-2\"><div><span x-text=\"datePickerMonthNames[datePickerMonth]\" class=\"text-lg font-bold\"></span> <span x-text=\"datePickerYear\" class=\"ml-1 text-lg font-normal text-muted-foreground\"></span></div><div><button @click=\"datePickerPreviousMonth()\" type=\"button\" class=\"inline-flex p-1 transition duration-100 ease-in-out rounded-full cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = Icon(IconProps{Name: "chevron-left", Size: "16", Class: "text-muted-foreground"}).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</button> <button @click=\"datePickerNextMonth()\" type=\"button\" class=\"inline-flex p-1 transition duration-100 ease-in-out rounded-full cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = Icon(IconProps{Name: "chevron-right", Size: "16", Class: "text-muted-foreground"}).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</button></div></div><div class=\"grid grid-cols-7 mb-3\"><template x-for=\"(day, index) in datePickerDays\" :key=\"index\"><div class=\"px-0.5\"><div x-text=\"day\" class=\"text-xs font-medium text-center text-muted-foreground\"></div></div></template></div><div class=\"grid grid-cols-7\"><template x-for=\"blankDay in datePickerBlankDaysInMonth\"><div class=\"p-1 text-sm text-center border border-transparent\"></div></template><template x-for=\"(day, dayIndex) in datePickerDaysInMonth\" :key=\"dayIndex\"><div class=\"px-0.5 mb-1 aspect-square\"><div x-text=\"day\" @click=\"datePickerDayClicked(day)\" :class=\"{\n &#39;bg-muted text-muted-foreground&#39;: datePickerIsToday(day) == true, \n &#39;text-foreground hover:bg-accent hover:text-accent-foreground&#39;: datePickerIsToday(day) == false &amp;&amp; datePickerIsSelectedDate(day) == false,\n &#39;bg-primary text-primary-foreground hover:bg-primary/90&#39;: datePickerIsSelectedDate(day) == true\n }\" class=\"flex items-center justify-center text-sm leading-none text-center rounded-full cursor-pointer h-7 w-7\"></div></div></template></div></div></div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}

4
pkg/components/navbar.templ
View File

@ -60,9 +60,7 @@ templ NavbarMobileMenu() {
@click="sidebarOpen = !sidebarOpen"
class="mr-2 lg:hidden p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
>
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h8M4 12h12M4 18h16"></path>
</svg>
@Icon(IconProps{Name: "square-library"})
</button>
}
}

10
pkg/components/navbar_templ.go
View File

@ -240,7 +240,15 @@ func NavbarMobileMenu() templ.Component {
}()
}
ctx = templ.InitializeContext(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<button @click=\"sidebarOpen = !sidebarOpen\" class=\"mr-2 lg:hidden p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500\"><svg class=\"h-6 w-6\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h8M4 12h12M4 18h16\"></path></svg></button>")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<button @click=\"sidebarOpen = !sidebarOpen\" class=\"mr-2 lg:hidden p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = Icon(IconProps{Name: "square-library"}).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</button>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}

4
pkg/components/sidebar_right.templ
View File

@ -51,9 +51,7 @@ templ SidebarRight() {
</p>
<a href="https://twitter.com/_axzilla" target="_blank" class="inline-flex items-center text-xs font-medium text-primary hover:text-primary/80 transition-colors duration-300">
Add Your Logo
<svg class="w-4 h-4 ml-1 transition-transform duration-300 group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
</svg>
@Icon(IconProps{Name: "chevron-right", Size: "16"})
</a>
</div>
</aside>

10
pkg/components/sidebar_right_templ.go
View File

@ -117,7 +117,15 @@ func SidebarRight() templ.Component {
}
}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"border border-border rounded-lg p-4 bg-muted/50 hover:bg-muted transition-colors duration-300\"><h4 class=\"text-sm font-medium text-foreground mb-2\">Your Logo Here</h4><p class=\"text-xs text-muted-foreground mb-3\">Join our showcase and connect with fellow developers.</p><a href=\"https://twitter.com/_axzilla\" target=\"_blank\" class=\"inline-flex items-center text-xs font-medium text-primary hover:text-primary/80 transition-colors duration-300\">Add Your Logo <svg class=\"w-4 h-4 ml-1 transition-transform duration-300 group-hover:translate-x-1\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14 5l7 7m0 0l-7 7m7-7H3\"></path></svg></a></div></aside>")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"border border-border rounded-lg p-4 bg-muted/50 hover:bg-muted transition-colors duration-300\"><h4 class=\"text-sm font-medium text-foreground mb-2\">Your Logo Here</h4><p class=\"text-xs text-muted-foreground mb-3\">Join our showcase and connect with fellow developers.</p><a href=\"https://twitter.com/_axzilla\" target=\"_blank\" class=\"inline-flex items-center text-xs font-medium text-primary hover:text-primary/80 transition-colors duration-300\">Add Your Logo")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = Icon(IconProps{Name: "chevron-right", Size: "16"}).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</a></div></aside>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}

4
pkg/components/themeswitcher.templ
View File

@ -16,9 +16,9 @@ templ ThemeSwitcher() {
}
templ DarkIcon() {
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></svg>
@Icon(IconProps{Name: "moon"})
}
templ LightIcon() {
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></svg>
@Icon(IconProps{Name: "sun-medium"})
}

4
pkg/components/themeswitcher_templ.go
View File

@ -96,7 +96,7 @@ func DarkIcon() templ.Component {
templ_7745c5c3_Var3 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-moon\"><path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z\"></path></svg>")
templ_7745c5c3_Err = Icon(IconProps{Name: "moon"}).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -125,7 +125,7 @@ func LightIcon() templ.Component {
templ_7745c5c3_Var4 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sun\"><circle cx=\"12\" cy=\"12\" r=\"4\"></circle><path d=\"M12 2v2\"></path><path d=\"M12 20v2\"></path><path d=\"m4.93 4.93 1.41 1.41\"></path><path d=\"m17.66 17.66 1.41 1.41\"></path><path d=\"M2 12h2\"></path><path d=\"M20 12h2\"></path><path d=\"m6.34 17.66-1.41 1.41\"></path><path d=\"m19.07 4.93-1.41 1.41\"></path></svg>")
templ_7745c5c3_Err = Icon(IconProps{Name: "sun-medium"}).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}

91
pkg/styles/goilerplate.css
View File

@ -775,10 +775,6 @@ body {
height: 4rem;
}
.h-4 {
height: 1rem;
}
.h-5 {
height: 1.25rem;
}
@ -827,10 +823,6 @@ body {
width: 75%;
}
.w-4 {
width: 1rem;
}
.w-5 {
width: 1.25rem;
}
@ -875,10 +867,6 @@ body {
flex-shrink: 1;
}
.shrink-0 {
flex-shrink: 0;
}
.-translate-x-full {
--tw-translate-x: -100%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@ -1082,10 +1070,6 @@ body {
border-color: hsl(var(--input) / var(--tw-border-opacity));
}
.border-neutral-200\/70 {
border-color: rgb(229 229 229 / 0.7);
}
.border-transparent {
border-color: transparent;
}
@ -1123,14 +1107,9 @@ body {
background-color: hsl(var(--muted) / 0.5);
}
.bg-neutral-200 {
.bg-popover {
--tw-bg-opacity: 1;
background-color: rgb(229 229 229 / var(--tw-bg-opacity));
}
.bg-neutral-800 {
--tw-bg-opacity: 1;
background-color: rgb(38 38 38 / var(--tw-bg-opacity));
background-color: hsl(var(--popover) / var(--tw-bg-opacity));
}
.bg-primary {
@ -1138,24 +1117,19 @@ body {
background-color: hsl(var(--primary) / var(--tw-bg-opacity));
}
.bg-primary\/90 {
background-color: hsl(var(--primary) / 0.9);
}
.bg-secondary {
--tw-bg-opacity: 1;
background-color: hsl(var(--secondary) / var(--tw-bg-opacity));
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-opacity-50 {
--tw-bg-opacity: 0.5;
}
.bg-opacity-75 {
--tw-bg-opacity: 0.75;
}
.fill-current {
fill: currentColor;
}
@ -1312,6 +1286,11 @@ body {
letter-spacing: -0.025em;
}
.text-accent-foreground {
--tw-text-opacity: 1;
color: hsl(var(--accent-foreground) / var(--tw-text-opacity));
}
.text-card-foreground {
--tw-text-opacity: 1;
color: hsl(var(--card-foreground) / var(--tw-text-opacity));
@ -1347,19 +1326,14 @@ body {
color: rgb(55 65 81 / var(--tw-text-opacity));
}
.text-gray-800 {
--tw-text-opacity: 1;
color: rgb(31 41 55 / var(--tw-text-opacity));
}
.text-muted-foreground {
--tw-text-opacity: 1;
color: hsl(var(--muted-foreground) / var(--tw-text-opacity));
}
.text-neutral-400 {
.text-popover-foreground {
--tw-text-opacity: 1;
color: rgb(163 163 163 / var(--tw-text-opacity));
color: hsl(var(--popover-foreground) / var(--tw-text-opacity));
}
.text-primary {
@ -1377,11 +1351,6 @@ body {
color: hsl(var(--secondary-foreground) / var(--tw-text-opacity));
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.underline {
text-decoration-line: underline;
}
@ -1475,12 +1444,6 @@ body {
transition-duration: 150ms;
}
.transition-transform {
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.duration-100 {
transition-duration: 100ms;
}
@ -1560,11 +1523,6 @@ body {
background-color: hsl(var(--muted) / var(--tw-bg-opacity));
}
.hover\:bg-neutral-200:hover {
--tw-bg-opacity: 1;
background-color: rgb(229 229 229 / var(--tw-bg-opacity));
}
.hover\:bg-primary\/90:hover {
background-color: hsl(var(--primary) / 0.9);
}
@ -1573,10 +1531,6 @@ body {
background-color: hsl(var(--secondary) / 0.8);
}
.hover\:bg-opacity-75:hover {
--tw-bg-opacity: 0.75;
}
.hover\:text-accent-foreground:hover {
--tw-text-opacity: 1;
color: hsl(var(--accent-foreground) / var(--tw-text-opacity));
@ -1592,11 +1546,6 @@ body {
color: rgb(107 114 128 / var(--tw-text-opacity));
}
.hover\:text-neutral-500:hover {
--tw-text-opacity: 1;
color: rgb(115 115 115 / var(--tw-text-opacity));
}
.hover\:text-primary\/80:hover {
color: hsl(var(--primary) / 0.8);
}
@ -1629,15 +1578,6 @@ body {
--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
}
.focus\:ring-ring:focus {
--tw-ring-opacity: 1;
--tw-ring-color: hsl(var(--ring) / var(--tw-ring-opacity));
}
.focus\:ring-offset-2:focus {
--tw-ring-offset-width: 2px;
}
.focus-visible\:outline-none:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
@ -1675,11 +1615,6 @@ body {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:translate-x-1 {
--tw-translate-x: 0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:text-foreground {
--tw-text-opacity: 1;
color: hsl(var(--foreground) / var(--tw-text-opacity));