add tailwindcss and a simple table component

raphi011 · Nov 15, 2024 · 4dd08ff · 4dd08ff
1 parent 7736013
commit 4dd08ff
Show file tree

Hide file tree

Showing 4 changed files with 426 additions and 470 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,6 +3,8 @@ example
 .DS_STORE
 
 example-server-bootstrap
-*.db
-db
-example
+example
+
+
+*_templ.go
+handoff.db
diff --git a/internal/html/component/test_run_table.templ b/internal/html/component/test_run_table.templ
@@ -0,0 +1,48 @@
+package component
+
+import (
+    "fmt"
+
+    "github.com/raphi011/handoff/internal/model"
+)
+
+templ TestRunTable(tsr model.TestSuiteRun) {
+	<div class="px-4 sm:px-6 lg:px-8">
+		<div class="mt-8 flow-root">
+			<div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+				<div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+					<table class="min-w-full divide-y divide-gray-300">
+						<thead>
+							<tr>
+								<th scope="col" class="whitespace-nowrap py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0">Name</th>
+								<th scope="col" class="whitespace-nowrap px-2 py-3.5 text-left text-sm font-semibold text-gray-900">Status</th>
+								<th scope="col" class="whitespace-nowrap px-2 py-3.5 text-left text-sm font-semibold text-gray-900">Duration</th>
+							</tr>
+						</thead>
+						<tbody class="divide-y divide-gray-200 bg-white">
+						for _, tr := range tsr.TestResults {
+							<tr>
+    							<td class="whitespace-nowrap py-2 pl-4 pr-3 text-sm text-gray-500 sm:pl-0"><a href={ templ.URL(fmt.Sprintf("/suites/%s/runs/%d/test/%s", tr.SuiteName, tsr.ID, tr.Name)) }>{ tr.Name }</a></td>
+    							<td class="whitespace-nowrap px-2 py-2 text-sm font-medium text-gray-900 flex items-center justify-start">if tr.Result == "passed" {
+       								<div class="flex-none rounded-full bg-green-400/10 p-1 text-green-400">
+                                        <div class="size-1.5 rounded-full bg-current"></div>
+                                    </div>
+    							} else {
+    								<div class="flex-none rounded-full bg-rose-400/10 p-1 text-rose-400">
+                                        <div class="size-1.5 rounded-full bg-current"></div>
+                                    </div>
+    							}
+    							if tr.SoftFailure {
+    								(soft failure)
+    							}</td>
+    								<td class="whitespace-nowrap px-2 py-2 text-sm text-gray-900">{ fmt.Sprintf("%dms", tr.DurationInMS) }</td>
+
+							</tr>
+						}
+						</tbody>
+					</table>
+				</div>
+			</div>
+		</div>
+	</div>
+}
diff --git a/internal/html/test-run.templ b/internal/html/test-run.templ
@@ -4,6 +4,7 @@ import (
    "fmt"
 
    "github.com/raphi011/handoff/internal/model"
+   "github.com/raphi011/handoff/internal/html/component"
 )
 
 templ RenderTestRun(tr model.TestRun) {
@@ -30,29 +31,8 @@ templ RenderTestSuiteRun(tsr model.TestSuiteRun) {
 		<h2>{ tsr.SuiteName }</h2>
 		<p>Started at { tsr.Start.Format("02.01 15:04:05") }, took { fmt.Sprintf("%d", tsr.DurationInMS) }ms to finish.</p>
 		<p>Is flaky: {  fmt.Sprintf("%t", tsr.Flaky) }</p>
-		<table>
-			<tr>
-				<th>Name</th>
-				<th>Passed</th>
-				<th style="text-align: right">Duration</th>
-			</tr>
-			for _, tr := range tsr.TestResults {
-				<tr>
-					<td><a href={ templ.URL(fmt.Sprintf("/suites/%s/runs/%d/test/%s", tr.SuiteName, tsr.ID, tr.Name)) }>{ tr.Name }</a></td>
-					<td>
-						if tr.Result == "passed" {
-							✅
-						} else {
-							❌
-						}
-						if tr.SoftFailure {
-							(soft failure)
-						}
-					</td>
-					<td style="text-align: right">{ fmt.Sprintf("%dms", tr.DurationInMS) }</td>
-				</tr>
-			}
-		</table>
+
+		@component.TestRunTable(tsr)
 	}
 }
 
@@ -86,7 +66,8 @@ templ body() {
 	<!DOCTYPE html>
 	<html>
 		<head>
-		    <meta charset="UTF-8">
+			<meta charset="UTF-8"/>
+			<script src="https://cdn.tailwindcss.com"></script>
 		</head>
 		<body>
 			<h1>Handoff</h1>