refactored view package
This commit is contained in:
165
internal/view/seasonsview/detail_page.templ
Normal file
165
internal/view/seasonsview/detail_page.templ
Normal file
@@ -0,0 +1,165 @@
|
||||
package seasonsview
|
||||
|
||||
import "git.haelnorr.com/h/oslstats/internal/db"
|
||||
import "git.haelnorr.com/h/oslstats/internal/view/baseview"
|
||||
import "time"
|
||||
import "strconv"
|
||||
|
||||
templ DetailPage(season *db.Season) {
|
||||
@baseview.Layout(season.Name) {
|
||||
<div class="max-w-screen-2xl mx-auto px-4 py-8">
|
||||
@SeasonDetails(season)
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
templ SeasonDetails(season *db.Season) {
|
||||
<div class="bg-mantle border border-surface1 rounded-lg overflow-hidden">
|
||||
<!-- Header Section -->
|
||||
<div class="bg-surface0 border-b border-surface1 px-6 py-8">
|
||||
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
||||
<div>
|
||||
<h1 class="text-4xl font-bold text-text mb-2">{ season.Name }</h1>
|
||||
<span class="inline-block bg-blue px-3 py-1 rounded-full text-sm font-semibold text-mantle">
|
||||
{ season.ShortName }
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<a
|
||||
href={ templ.SafeURL("/seasons/" + season.ShortName + "/edit") }
|
||||
class="rounded-lg px-4 py-2 hover:cursor-pointer text-center
|
||||
bg-blue hover:bg-blue/75 text-mantle transition"
|
||||
>
|
||||
Edit
|
||||
</a>
|
||||
<a
|
||||
href="/seasons"
|
||||
class="rounded-lg px-4 py-2 hover:cursor-pointer text-center
|
||||
bg-surface1 hover:bg-surface2 text-text transition"
|
||||
>
|
||||
Back to Seasons
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Information Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 p-6">
|
||||
<!-- Regular Season Section -->
|
||||
<div class="bg-surface0 border border-surface1 rounded-lg p-6">
|
||||
<h2 class="text-2xl font-bold text-text mb-4 flex items-center gap-2">
|
||||
<span class="text-blue">●</span>
|
||||
Regular Season
|
||||
</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-subtext0">Start Date:</span>
|
||||
<span class="text-text font-semibold">
|
||||
{ formatDateLong(season.StartDate) }
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-subtext0">End Date:</span>
|
||||
<span class="text-text font-semibold">
|
||||
if !season.EndDate.IsZero() {
|
||||
{ formatDateLong(season.EndDate.Time) }
|
||||
} else {
|
||||
<span class="text-subtext1 italic">Not set</span>
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-subtext0">Duration:</span>
|
||||
<span class="text-text font-semibold">
|
||||
if !season.EndDate.IsZero() {
|
||||
{ formatDuration(season.StartDate, season.EndDate.Time) }
|
||||
} else {
|
||||
<span class="text-subtext1 italic">Ongoing</span>
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Finals Section -->
|
||||
<div class="bg-surface0 border border-surface1 rounded-lg p-6">
|
||||
<h2 class="text-2xl font-bold text-text mb-4 flex items-center gap-2">
|
||||
<span class="text-yellow">★</span>
|
||||
Finals
|
||||
</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-subtext0">Start Date:</span>
|
||||
<span class="text-text font-semibold">
|
||||
if !season.FinalsStartDate.IsZero() {
|
||||
{ formatDateLong(season.FinalsStartDate.Time) }
|
||||
} else {
|
||||
<span class="text-subtext1 italic">Not set</span>
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-subtext0">End Date:</span>
|
||||
<span class="text-text font-semibold">
|
||||
if !season.FinalsEndDate.IsZero() {
|
||||
{ formatDateLong(season.FinalsEndDate.Time) }
|
||||
} else {
|
||||
<span class="text-subtext1 italic">Not set</span>
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-subtext0">Duration:</span>
|
||||
<span class="text-text font-semibold">
|
||||
if !season.FinalsStartDate.IsZero() && !season.FinalsEndDate.IsZero() {
|
||||
{ formatDuration(season.FinalsStartDate.Time, season.FinalsEndDate.Time) }
|
||||
} else {
|
||||
<span class="text-subtext1 italic">Not scheduled</span>
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Status Section -->
|
||||
<div class="px-6 pb-6">
|
||||
<div class="bg-surface0 border border-surface1 rounded-lg p-6">
|
||||
<h2 class="text-2xl font-bold text-text mb-4">Status</h2>
|
||||
<div class="flex items-center gap-3">
|
||||
@StatusBadge(season, false, false)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
func formatDateLong(t time.Time) string {
|
||||
return t.Format("January 2, 2006")
|
||||
}
|
||||
|
||||
func formatDuration(start, end time.Time) string {
|
||||
days := int(end.Sub(start).Hours() / 24)
|
||||
if days == 0 {
|
||||
return "Same day"
|
||||
} else if days == 1 {
|
||||
return "1 day"
|
||||
} else if days < 7 {
|
||||
return strconv.Itoa(days) + " days"
|
||||
} else if days < 30 {
|
||||
weeks := days / 7
|
||||
if weeks == 1 {
|
||||
return "1 week"
|
||||
}
|
||||
return strconv.Itoa(weeks) + " weeks"
|
||||
} else if days < 365 {
|
||||
months := days / 30
|
||||
if months == 1 {
|
||||
return "1 month"
|
||||
}
|
||||
return strconv.Itoa(months) + " months"
|
||||
} else {
|
||||
years := days / 365
|
||||
if years == 1 {
|
||||
return "1 year"
|
||||
}
|
||||
return strconv.Itoa(years) + " years"
|
||||
}
|
||||
}
|
||||
110
internal/view/seasonsview/list_page.templ
Normal file
110
internal/view/seasonsview/list_page.templ
Normal file
@@ -0,0 +1,110 @@
|
||||
package seasonsview
|
||||
|
||||
import "git.haelnorr.com/h/oslstats/internal/db"
|
||||
import "git.haelnorr.com/h/oslstats/internal/view/baseview"
|
||||
import "git.haelnorr.com/h/oslstats/internal/view/pagination"
|
||||
import "git.haelnorr.com/h/oslstats/internal/view/sort"
|
||||
import "fmt"
|
||||
import "time"
|
||||
import "github.com/uptrace/bun"
|
||||
|
||||
templ ListPage(seasons *db.List[db.Season]) {
|
||||
@baseview.Layout("Seasons") {
|
||||
<div class="max-w-screen-2xl mx-auto px-2">
|
||||
@SeasonsList(seasons)
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
templ SeasonsList(seasons *db.List[db.Season]) {
|
||||
{{
|
||||
sortOpts := []db.OrderOpts{
|
||||
{
|
||||
Order: bun.OrderDesc,
|
||||
OrderBy: "start_date",
|
||||
Label: "Start Date (Newest First)",
|
||||
},
|
||||
{
|
||||
Order: bun.OrderAsc,
|
||||
OrderBy: "start_date",
|
||||
Label: "Start Date (Oldest First)",
|
||||
},
|
||||
{
|
||||
Order: bun.OrderAsc,
|
||||
OrderBy: "name",
|
||||
Label: "Name (A-Z)",
|
||||
},
|
||||
{
|
||||
Order: bun.OrderDesc,
|
||||
OrderBy: "name",
|
||||
Label: "Name (Z-A)",
|
||||
},
|
||||
}
|
||||
}}
|
||||
<div id="seasons-list-container">
|
||||
<form
|
||||
id="seasons-form"
|
||||
hx-target="#seasons-list-container"
|
||||
hx-swap="outerHTML"
|
||||
hx-push-url="true"
|
||||
x-data={ templ.JSFuncCall("paginateData",
|
||||
"seasons-form",
|
||||
"/seasons",
|
||||
seasons.PageOpts.Page,
|
||||
seasons.PageOpts.PerPage,
|
||||
seasons.PageOpts.Order,
|
||||
seasons.PageOpts.OrderBy).CallInline }
|
||||
>
|
||||
<!-- Header with title and sort controls -->
|
||||
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6 px-4">
|
||||
<div class="flex gap-4 items-center">
|
||||
<span class="text-3xl font-bold">Seasons</span>
|
||||
<a
|
||||
href="/seasons/new"
|
||||
class="rounded-lg px-2 py-1 hover:cursor-pointer text-center text-sm
|
||||
bg-green hover:bg-green/75 text-mantle transition"
|
||||
>Add season</a>
|
||||
</div>
|
||||
@sort.Dropdown(seasons.PageOpts, sortOpts)
|
||||
</div>
|
||||
<!-- Results section -->
|
||||
if len(seasons.Items) == 0 {
|
||||
<div class="bg-mantle border border-surface1 rounded-lg p-8 text-center">
|
||||
<p class="text-subtext0 text-lg">No seasons found</p>
|
||||
</div>
|
||||
} else {
|
||||
<!-- Card grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
for _, s := range seasons.Items {
|
||||
<a
|
||||
class="bg-mantle border border-surface1 rounded-lg p-6 hover:bg-surface0 transition-colors"
|
||||
href={ fmt.Sprintf("/seasons/%s", s.ShortName) }
|
||||
>
|
||||
<!-- Header: Name + Status Badge -->
|
||||
<div class="flex justify-between items-start mb-3">
|
||||
<h3 class="text-xl font-bold text-text">{ s.Name }</h3>
|
||||
@StatusBadge(s, true, true)
|
||||
</div>
|
||||
<!-- Info Row: Short Name + Start Date -->
|
||||
<div class="flex items-center gap-3 text-sm">
|
||||
<span class="px-2 py-1 bg-surface1 rounded text-subtext0 font-mono">
|
||||
{ s.ShortName }
|
||||
</span>
|
||||
<span class="text-subtext0">
|
||||
Started: { formatDate(s.StartDate) }
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
<!-- Pagination controls -->
|
||||
@pagination.Pagination(seasons.PageOpts, seasons.Total)
|
||||
}
|
||||
</form>
|
||||
<script src="/static/js/pagination.js"></script>
|
||||
</div>
|
||||
}
|
||||
|
||||
func formatDate(t time.Time) string {
|
||||
return t.Format("02/01/2006") // DD/MM/YYYY
|
||||
}
|
||||
177
internal/view/seasonsview/new_form.templ
Normal file
177
internal/view/seasonsview/new_form.templ
Normal file
@@ -0,0 +1,177 @@
|
||||
package seasonsview
|
||||
|
||||
import "git.haelnorr.com/h/oslstats/internal/view/datepicker"
|
||||
|
||||
templ NewForm() {
|
||||
<form
|
||||
hx-post="/seasons/new"
|
||||
hx-swap="none"
|
||||
x-data={ templ.JSFuncCall("newSeasonFormData").CallInline }
|
||||
@submit="handleSubmit()"
|
||||
@htmx:after-request="if(submitTimeout) clearTimeout(submitTimeout); const redirect = $event.detail.xhr.getResponseHeader('HX-Redirect'); if(redirect) return; if(!$event.detail.successful) { isSubmitting=false; buttonText='Create Season'; generalError='An error occurred. Please try again.'; }"
|
||||
>
|
||||
<script>
|
||||
function newSeasonFormData() {
|
||||
return {
|
||||
canSubmit: false,
|
||||
buttonText: "Create Season",
|
||||
// Name validation state
|
||||
nameError: "",
|
||||
nameIsChecking: false,
|
||||
nameIsUnique: false,
|
||||
nameIsEmpty: true,
|
||||
// Short name validation state
|
||||
shortNameError: "",
|
||||
shortNameIsChecking: false,
|
||||
shortNameIsUnique: false,
|
||||
shortNameIsEmpty: true,
|
||||
// Date validation state
|
||||
dateError: "",
|
||||
dateIsEmpty: true,
|
||||
// Form state
|
||||
isSubmitting: false,
|
||||
generalError: "",
|
||||
submitTimeout: null,
|
||||
// Reset name errors
|
||||
resetNameErr() {
|
||||
this.nameError = "";
|
||||
this.nameIsChecking = false;
|
||||
this.nameIsUnique = false;
|
||||
},
|
||||
// Reset short name errors
|
||||
resetShortNameErr() {
|
||||
this.shortNameError = "";
|
||||
this.shortNameIsChecking = false;
|
||||
this.shortNameIsUnique = false;
|
||||
},
|
||||
// Reset date errors
|
||||
resetDateErr() {
|
||||
this.dateError = "";
|
||||
},
|
||||
// Check if form can be submitted
|
||||
updateCanSubmit() {
|
||||
this.canSubmit = !this.nameIsEmpty && this.nameIsUnique && !this.nameIsChecking &&
|
||||
!this.shortNameIsEmpty && this.shortNameIsUnique && !this.shortNameIsChecking &&
|
||||
!this.dateIsEmpty;
|
||||
},
|
||||
// Handle form submission
|
||||
handleSubmit() {
|
||||
this.isSubmitting = true;
|
||||
this.buttonText = 'Creating...';
|
||||
this.generalError = '';
|
||||
// Set timeout for 10 seconds
|
||||
this.submitTimeout = setTimeout(() => {
|
||||
this.isSubmitting = false;
|
||||
this.buttonText = 'Create Season';
|
||||
this.generalError = 'Request timed out. Please try again.';
|
||||
}, 10000);
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
<div class="grid gap-y-5">
|
||||
<!-- Name Field -->
|
||||
<div>
|
||||
<label for="name" class="block text-sm font-medium mb-2">Season Name</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
maxlength="20"
|
||||
x-bind:class="{
|
||||
'py-3 px-4 block w-full rounded-lg text-sm bg-base disabled:opacity-50 disabled:pointer-events-none border-2 outline-none': true,
|
||||
'border-overlay0 focus:border-blue': !nameIsUnique && !nameError,
|
||||
'border-green focus:border-green': nameIsUnique && !nameIsChecking && !nameError,
|
||||
'border-red focus:border-red': nameError && !nameIsChecking && !isSubmitting
|
||||
}"
|
||||
required
|
||||
placeholder="e.g. Season 1"
|
||||
@input="resetNameErr(); nameIsEmpty = $el.value.trim() === ''; if(nameIsEmpty) { nameError='Season name is required'; nameIsUnique=false; } updateCanSubmit();"
|
||||
hx-post="/htmx/isseasonnameunique"
|
||||
hx-trigger="input changed delay:500ms"
|
||||
hx-swap="none"
|
||||
@htmx:before-request="if($el.value.trim() === '') { nameIsEmpty=true; return; } nameIsEmpty=false; nameIsChecking=true; nameIsUnique=false; nameError=''; updateCanSubmit();"
|
||||
@htmx:after-request="nameIsChecking=false; if($event.detail.successful) { nameIsUnique=true; } else if($event.detail.xhr.status === 409) { nameError='This season name is already taken'; nameIsUnique=false; } updateCanSubmit();"
|
||||
/>
|
||||
<p class="text-xs text-subtext1 mt-1">Maximum 20 characters</p>
|
||||
</div>
|
||||
<p
|
||||
class="text-center text-xs text-red mt-2"
|
||||
x-show="nameError && !isSubmitting"
|
||||
x-cloak
|
||||
x-text="nameError"
|
||||
></p>
|
||||
</div>
|
||||
<!-- Short Name Field -->
|
||||
<div>
|
||||
<label for="short_name" class="block text-sm font-medium mb-2">Short Name</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="text"
|
||||
id="short_name"
|
||||
name="short_name"
|
||||
maxlength="6"
|
||||
x-bind:class="{
|
||||
'py-3 px-4 block w-full rounded-lg text-sm bg-base disabled:opacity-50 disabled:pointer-events-none border-2 outline-none uppercase': true,
|
||||
'border-overlay0 focus:border-blue': !shortNameIsUnique && !shortNameError,
|
||||
'border-green focus:border-green': shortNameIsUnique && !shortNameIsChecking && !shortNameError,
|
||||
'border-red focus:border-red': shortNameError && !shortNameIsChecking && !isSubmitting
|
||||
}"
|
||||
required
|
||||
placeholder="e.g. S1"
|
||||
pattern="[A-Z0-9]+"
|
||||
@input="
|
||||
let val = $el.value.toUpperCase().replace(/[^A-Z0-9]/g, '');
|
||||
$el.value = val;
|
||||
resetShortNameErr();
|
||||
shortNameIsEmpty = val.trim() === '';
|
||||
if(shortNameIsEmpty) {
|
||||
shortNameError='Short name is required';
|
||||
shortNameIsUnique=false;
|
||||
}
|
||||
updateCanSubmit();
|
||||
"
|
||||
hx-post="/htmx/isseasonshortnameunique"
|
||||
hx-trigger="input changed delay:500ms"
|
||||
hx-swap="none"
|
||||
@htmx:before-request="if($el.value.trim() === '') { shortNameIsEmpty=true; return; } shortNameIsEmpty=false; shortNameIsChecking=true; shortNameIsUnique=false; shortNameError=''; updateCanSubmit();"
|
||||
@htmx:after-request="shortNameIsChecking=false; if($event.detail.successful) { shortNameIsUnique=true; } else if($event.detail.xhr.status === 409) { shortNameError='This short name is already taken'; shortNameIsUnique=false; } updateCanSubmit();"
|
||||
/>
|
||||
<p class="text-xs text-subtext1 mt-1">Maximum 6 characters, alphanumeric only (auto-capitalized)</p>
|
||||
</div>
|
||||
<p
|
||||
class="text-center text-xs text-red mt-2"
|
||||
x-show="shortNameError && !isSubmitting"
|
||||
x-cloak
|
||||
x-text="shortNameError"
|
||||
></p>
|
||||
</div>
|
||||
<!-- Start Date Field -->
|
||||
@datepicker.DatePicker("start_date", "start_date", "Start Date", "DD/MM/YYYY", true, "dateIsEmpty = $el.value === ''; resetDateErr(); if(dateIsEmpty) { dateError='Start date is required'; } updateCanSubmit();")
|
||||
<p
|
||||
class="text-center text-xs text-red mt-2"
|
||||
x-show="dateError && !isSubmitting"
|
||||
x-cloak
|
||||
x-text="dateError"
|
||||
></p>
|
||||
<!-- General Error Message -->
|
||||
<p
|
||||
class="text-center text-sm text-red"
|
||||
x-show="generalError"
|
||||
x-cloak
|
||||
x-text="generalError"
|
||||
></p>
|
||||
<!-- Submit Button -->
|
||||
<button
|
||||
x-bind:disabled="!canSubmit || isSubmitting"
|
||||
x-text="buttonText"
|
||||
type="submit"
|
||||
class="w-full py-3 px-4 inline-flex justify-center items-center
|
||||
gap-x-2 rounded-lg border border-transparent transition text-base font-semibold
|
||||
bg-blue hover:bg-blue/75 text-mantle hover:cursor-pointer
|
||||
disabled:bg-blue/40 disabled:cursor-not-allowed"
|
||||
></button>
|
||||
</div>
|
||||
</form>
|
||||
}
|
||||
23
internal/view/seasonsview/new_page.templ
Normal file
23
internal/view/seasonsview/new_page.templ
Normal file
@@ -0,0 +1,23 @@
|
||||
package seasonsview
|
||||
|
||||
import "git.haelnorr.com/h/oslstats/internal/view/baseview"
|
||||
|
||||
templ NewPage() {
|
||||
@baseview.Layout("New Season") {
|
||||
<div class="max-w-screen-lg mx-auto px-4 py-8">
|
||||
<div class="bg-mantle border border-surface1 rounded-xl">
|
||||
<div class="p-6 sm:p-8">
|
||||
<div class="text-center mb-8">
|
||||
<h1 class="text-3xl font-bold text-text">Create New Season</h1>
|
||||
<p class="mt-2 text-sm text-subtext0">
|
||||
Add a new season to the system. All fields are required.
|
||||
</p>
|
||||
</div>
|
||||
<div class="max-w-md mx-auto">
|
||||
@NewForm()
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
71
internal/view/seasonsview/status_badge.templ
Normal file
71
internal/view/seasonsview/status_badge.templ
Normal file
@@ -0,0 +1,71 @@
|
||||
package seasonsview
|
||||
|
||||
import "git.haelnorr.com/h/oslstats/internal/db"
|
||||
import "time"
|
||||
|
||||
// StatusBadge renders a season status badge
|
||||
// Parameters:
|
||||
// - season: pointer to db.Season
|
||||
// - compact: bool - true for list view (text only, small), false for detail view (icon + text, large)
|
||||
// - useShortLabels: bool - true for "Active/Finals", false for "In Progress/Finals in Progress"
|
||||
templ StatusBadge(season *db.Season, compact bool, useShortLabels bool) {
|
||||
{{
|
||||
now := time.Now()
|
||||
status := ""
|
||||
statusColor := ""
|
||||
statusBg := ""
|
||||
|
||||
// Determine status based on dates
|
||||
if now.Before(season.StartDate) {
|
||||
status = "Upcoming"
|
||||
statusColor = "text-blue"
|
||||
statusBg = "bg-blue/10 border-blue"
|
||||
} else if !season.EndDate.IsZero() && now.After(season.EndDate.Time) {
|
||||
status = "Completed"
|
||||
statusColor = "text-green"
|
||||
statusBg = "bg-green/10 border-green"
|
||||
} else if !season.FinalsStartDate.IsZero() && now.After(season.FinalsStartDate.Time) {
|
||||
if !season.FinalsEndDate.IsZero() && now.After(season.FinalsEndDate.Time) {
|
||||
status = "Completed"
|
||||
statusColor = "text-green"
|
||||
statusBg = "bg-green/10 border-green"
|
||||
} else {
|
||||
if useShortLabels {
|
||||
status = "Finals"
|
||||
} else {
|
||||
status = "Finals in Progress"
|
||||
}
|
||||
statusColor = "text-yellow"
|
||||
statusBg = "bg-yellow/10 border-yellow"
|
||||
}
|
||||
} else {
|
||||
if useShortLabels {
|
||||
status = "Active"
|
||||
} else {
|
||||
status = "In Progress"
|
||||
}
|
||||
statusColor = "text-green"
|
||||
statusBg = "bg-green/10 border-green"
|
||||
}
|
||||
|
||||
// Determine size classes
|
||||
var sizeClasses string
|
||||
var textSize string
|
||||
var iconSize string
|
||||
if compact {
|
||||
sizeClasses = "px-2 py-1"
|
||||
textSize = "text-xs"
|
||||
iconSize = "text-sm"
|
||||
} else {
|
||||
sizeClasses = "px-4 py-2"
|
||||
textSize = "text-lg"
|
||||
iconSize = "text-2xl"
|
||||
}
|
||||
}}
|
||||
<div class={ "rounded-lg border-2 inline-flex items-center gap-2 " + sizeClasses + " " + statusBg }>
|
||||
if !compact {
|
||||
<span class={ iconSize + " " + statusColor }>●</span>
|
||||
}
|
||||
<span class={ textSize + " font-semibold " + statusColor }>{ status }</span>
|
||||
</div>
|
||||
}
|
||||
Reference in New Issue
Block a user