add theme switch

henriquepw · Aug 17, 2024 · aaa11ee · aaa11ee
1 parent 8834e43
commit aaa11ee
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 11 deletions.
diff --git a/database/database.go b/database/database.go
@@ -0,0 +1 @@
+package database
diff --git a/web/view/employee/employees.templ b/web/view/employee/employees.templ
@@ -11,13 +11,13 @@ templ EmployeesPage() {
 			@ui.Breadcrumb([]ui.BreadcrumbItem{
 				{Label: "Profissinais", Href: "/employees"},
 			})
-			<h1 class="text-3xl text-gray-12 font-bold mb-4">Novo Profissinal</h1>
-			<section class="">
-				@ui.TextInput(ui.TextInputProps{})
+			<div class="flex gap-6 justify-between flex-wrap">
+				<h1 class="text-3xl text-gray-12 font-bold mb-4">Novo Profissinal</h1>
 				@ui.Link(ui.LinkProps{Href: "employees/create"}) {
-					Novo Profissional
+					<i data-feather="plus"></i>
+					<span>Novo Profissional</span>
 				}
-			</section>
+			</div>
 			<section>
 				EMPLOYEES
 			</section>

diff --git a/web/view/layout/base.templ b/web/view/layout/base.templ
@@ -2,21 +2,21 @@ package layout
 
 templ Base(title string) {
 	<!DOCTYPE html>
-	<html lang="pt-BR" class="dark">
+	<html lang="pt-BR">
 		<head>
 			<meta charset="UTF-8"/>
 			<meta name="viewport" content="width=device-width"/>
 			<title>{ title } | Imperium Tattoo</title>
 			<link href="/static/css/output.css" rel="stylesheet"/>
+			<script src="https://unpkg.com/@alpinejs/persist" defer></script>
+			<script src="https://unpkg.com/alpinejs" defer></script>
 			<script src="https://unpkg.com/feather-icons"></script>
 			<script src="https://unpkg.com/[email protected]" integrity="sha384-Y7hw+L/jvKeWIRRkqWYfPcvVxHzVzn5REgzbawhxAuQGwX1XWe70vji+VSeHOThJ" crossorigin="anonymous">
     </script>
 		</head>
-		<body class="bg-gray-1 text-gray-12">
+		<body x-data="{ theme: $persist('dark')}" :class="theme" class="bg-gray-1 text-gray-12">
 			{ children... }
-			<script>
-    feather.replace()
-  </script>
 		</body>
+		<script>feather.replace()</script>
 	</html>
 }
diff --git a/web/view/layout/dashboard.templ b/web/view/layout/dashboard.templ
@@ -10,6 +10,7 @@ templ Dashbaord(title, route string) {
 		>
 			<header class="flex justify-between items-center px-4 h-12 row-span-1 col-start-1 col-end-3 border-b w-full">
 				<span class="text-accent-9">LOGO</span>
+				<button @click="theme = theme === 'dark' ? 'light' : 'dark'">Thema</button>
 				<nav class="flex list-none gap-4">
 					<a href="/" class={ templ.KV("text-accent-10", route == "home") }>Home</a>
 					<!-- <a href="/clients" class={ templ.KV("text-accent-10", route == "clients") }>Clientes</a> -->

diff --git a/web/view/ui/breadcrumb.templ b/web/view/ui/breadcrumb.templ
@@ -18,7 +18,7 @@ templ Breadcrumb(items []BreadcrumbItem) {
 				href={ templ.URL(item.Href) }
 				data-active={ strconv.FormatBool(i == len(items)-1) }
 				class="
-          transition-colors leading-none hover:text-accent-9 outline-none rounded
+          transition-colors leading-none hover:text-accent-9 outline-none rounded-sm
           focus-visible:ring-2 focus-visible:ring-accent-10 ring-offset-2 ring-offset-gray-1
           data-[active=true]:text-accent-10 data-[active=true]:pointer-events-none
           data-[active=false]:hover:underline data-[active=false]:cursor-pointer