XavierHsiao wrote a comment+100 XP
1mo ago
Seems that Jeffery did not mention displaying flash data. We just need to add it from seesion as below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Idea</title>
@vite(['resources/css/app.css'])
</head>
<body class="bg-background text-foreground">
<x-layout.nav />
{{-- Flash Data --}}
@if (session('success'))
<div class="fixed bottom-4 right-4 bg-primary text-primary-foreground px-6 py-3 rounded-xl shadow-lg">
{{ session('success') }}</div>
@endif
<main class="max-w-7xl mx-auto px-6 pb-10">
{{ $slot }}
</main>
</body>
</html>
XavierHsiao liked a comment+100 XP
1mo ago
@rudysacostacrousset <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1164 409"><path d="M242.974 1.415c-6.2 0-13.201.7-16.301 1.5-7.8 2.1-15.3 5.7-22.6 10.9-6.9 5-9.4 7.9-9.4 11 0 1.4 6.4 8.4 18.8 20.7 15.9 15.8 19.8 19.1 26 22.2 15.2 7.6 32.3 8.5 48.9 2.6 14.1-5.1 16.5-5.5 21.9-4 2.7.8 6.5 2.9 8.7 4.9 5.6 5 7.7 9.8 7.7 17.4 0 9.6-3.1 13.9-30.8 41.9-27.5 27.9-28.8 29.4-33.2 36.8-14.7 24.8-14.4 57.3.6 80.7 5.2 8.2 11.3 14.3 14.1 14.3 3.5 0 83.8-80.2 88.2-88.1 10.5-19 12.4-41.1 5.2-60.9-5.7-15.5-10.4-21.1-52.3-62.2-21.4-20.9-40.9-39.2-44-41.2-9.6-6.1-18.9-8.6-31.5-8.5m-129.55 26.212c-2.725.037-4.7.139-5.25.289-17.9 4.5-23.6 8.7-57.5 42.499-30.6 30.5-36 36.8-42 49.3-12.6 26.3-7.7 59.2 11.8 79.8 6 6.3 6.8 5.9 24.3-12 20.8-21.1 25.6-29.5 28.1-48.8 1.4-10.6-.8-24.3-5.4-34.7-6.5-14.5-4.6-26.7 5.1-32.9 4.2-2.7 5.2-2.9 11.7-2.5 5.6.3 8.3 1 12 3.2 2.6 1.5 18.5 16.4 36.1 33.8 17.2 17.1 33.7 32.6 36.6 34.6 9.2 6.2 16.6 8.3 30.7 8.9 9.6.3 14.1 0 19-1.2 14.3-3.7 30-13.8 30-19.4 0-2.2-7.7-10.4-42.7-45.3-45.6-45.3-48.8-48-63.3-53-5.2-1.8-9.2-2.3-19.5-2.5-3.55-.1-7.025-.126-9.75-.088m445.25 55.687v45h44.9l.3-22.1c.2-12.1.1-22.3-.1-22.5s-10.5-.4-22.8-.4zm193 0v82.901l-5-5.3c-5.6-5.9-13.3-10.5-22.5-13.3-9-2.7-31.2-2.4-41.8.5-26.5 7.5-45.9 28.1-53.9 57.3-1.9 7.2-2.2 10.8-2.2 25.4 0 14.4.3 18.3 2.3 25.5 7.5 28.4 28.5 50.1 55.1 57 9.6 2.5 29.4 2.7 38.4.4 9.7-2.5 18.5-7.3 25.8-14.3l6.8-6.3v18.2h42v-228zm146.073 62.423c-5.429-.01-10.548.178-12.573.478-34.3 5.5-59.4 30.5-66 65.6-2.3 12.3-1.7 33.6 1.4 45.3 8 30.4 28.6 50.6 58 56.8 11.4 2.4 34 2.1 46.1-.5 24.2-5.2 44.1-21.4 52.5-42.8 1.2-3.2 2.5-7 2.9-8.6l.6-2.7h-42l-2.1 4.2c-12.1 23.7-53.5 23.2-67.6-.9-2.5-4.3-6.3-15.1-6.3-17.9 0-1.2 9-1.4 59.6-1.4h59.7l-.6-15.8c-.6-18.3-2.6-27.3-8.7-39.7-9.5-19.3-25.9-32.7-47.5-39-7.1-2.1-11.7-2.7-22-3a207 207 0 0 0-5.427-.078m174.382.024c-5.297-.065-10.243.103-13.655.553-15.5 1.9-32.5 9.701-41.8 19-8.4 8.5-15 22.7-15 32.7v3.3h41.8l1.3-3.799c3.7-11.6 14.1-18.2 28.4-18.2 17.7 0 28.5 10.3 28.5 27.2v4.8h-21.7c-30.9 0-41.2 1.8-57.2 9.6-45.6 22.4-39.7 79.8 9.5 92.4 10.7 2.8 29.1 2.8 40 0 10.7-2.7 21.5-8.3 28.2-14.7 3.1-2.9 5.7-5.1 5.8-5s1.1 2.1 2.3 4.4c2.7 5.5 9.4 10.8 16.6 13.3 6.7 2.3 26.4 2.8 34.1.9l4.4-1.1v-30.5l-5.1-.6c-2.8-.4-6.3-1.4-7.6-2.2-5-3.3-5.3-5.7-5.3-42.4 0-38.3-.6-43.4-6.6-55.9-7.2-15-24.5-27.7-43-31.7-5.312-1.188-15.117-1.946-23.945-2.054m-469.154 3.754c-.5.2-10.6.4-22.5.5l-21.802.3v161h45v-81c0-44.6-.298-80.9-.698-80.8m-479.416 6.861c-4.9-.05-13.584 9.173-42.984 38.639-41.5 41.7-45.101 46.1-50.701 61.5-2.5 6.7-2.7 8.5-2.7 22.3.1 13.5.3 15.8 2.7 22.8 4.8 14.2 9.4 20.5 29.2 40.3 25.4 25.3 53 50.9 59.9 55.6 13.5 9.2 24.7 12.2 42.7 11.5 10.1-.3 14-.9 20.5-3.1 14.5-4.9 28.3-14.6 28.5-20 0-2-33.7-34.9-40-39-17.9-11.7-38.2-13.8-60-6.3-6.4 2.2-12.4 3.7-15.3 3.7-12.9 0-24.2-12.4-22.3-24.5 1.4-8.7 4.3-12.3 34.1-42.5 27.7-28 29.4-30 33.4-38 12.2-24.8 8.3-54.6-10-76.8-2.922-3.54-4.449-6.112-7.015-6.139m777.218 23.092c6.161.067 13.059 1.246 17.496 3.246 11 5.1 17.901 14.302 20.801 27.802l.6 2.799h-76l.6-2.8c3.6-14.9 12.8-25.2 26.9-29.9 2.475-.825 5.907-1.187 9.603-1.147m-188.439 4.112a77 77 0 0 1 3.435.035c7.4.3 9.601.8 15.201 3.5 16.9 8.4 25.9 26.4 24.4 49.2-1.7 26.9-19.2 43.6-43.8 41.7-11.4-.9-17.9-3.8-25.3-11.1-6.7-6.6-9.6-11.7-12.1-21.1-1.8-6.9-2-20.2-.4-27.7 2.6-12.2 10.5-24.2 19.8-29.6 5.862-3.412 11.112-4.834 18.764-4.935m-342.064 30.735c-2.9 0-5.1 1.8-19.3 16.3-14.8 15-16.3 16.9-20.6 25.7-9.2 18.7-10 31.7-3.2 51.4 5.1 14.7 4.2 20.7-3.8 25.7-4.2 2.6-13.3 2.1-19.7-1.1-3-1.5-14.4-12.1-33.5-31-31.3-31.1-36.6-35.3-49.9-39.7-7.1-2.4-9.7-2.7-21.6-2.7-12.2-.1-14.3.2-22.2 2.8-8.6 2.8-23.1 11.3-25.1 14.7-.6.9-.7 2.7-.4 4 .4 1.4 19.3 21 43.9 45.5 45.9 45.7 47.3 46.9 62 52.1 8.6 3 26.5 4.2 36 2.4 8.5-1.5 20.3-6.6 27.2-11.5 7.2-5.1 54.8-53.1 59.5-60 4.8-6.9 8.8-16.1 11.2-25.6 4.1-16 1.4-37.1-6.7-53.3-5.4-10.7-9.8-15.7-13.8-15.7m724.09 29.083c7.467.061 8.31.418 8.31 1.618 0 4.7-2.3 15-4.1 18.5-3.1 6.1-10.3 12.6-17.5 16-12.3 5.8-29.5 4.9-36.8-1.8-7.4-7-7.4-18.6 0-25.6 3.6-3.3 11.1-6.7 17.3-7.8 2.5-.4 12.8-.801 22.9-.901 4.176-.025 7.4-.037 9.89-.017" style="fill:#fff;"/></svg>
XavierHsiao liked a comment+100 XP
1mo ago
Here are the full CSS component files for those looking to copy:
resources/css/components/btn.css
button {
cursor: pointer;
}
.btn {
background: var(--color-primary);
border-radius: var(--radius-xl);
color: var(--color-primary-foreground);
padding-inline: calc(var(--spacing) * 3);
font-size: var(--text-sm);
font-weight: var(--font-weight-medium);
cursor: pointer;
height: calc(var(--spacing) * 8);
line-height: calc(var(--spacing) * 8);
display: inline-block;
}
.btn.btn-outlined {
background: transparent;
border: 1px solid var(--color-border);
border-color: var(--color-border);
color: var(--color-foreground);
}
.btn.btn-outlined:hover {
background: color-mix(in srgb, black 25%, var(--color-input));
}
.btn.btn-ghost {
background: transparent;
}
.btn:has(> svg) {
display: flex;
align-items: center;
column-gap: calc(var(--spacing) * 2);
}
.btn:hover {
background: color-mix(in srgb, black 10%, var(--color-primary));
text-decoration: none;
}
resources/css/components/form.css
label {
color: var(--color-foreground);
}
.input {
border-radius: var(--radius-md);
height: calc(var(--spacing) * 10);
width: 100%;
border-width: 1px;
border-color: var(--color-border);
padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
background-color: var(--color-card);
color: var(--color-foreground);
outline: 2px solid transparent;
outline-offset: 2px;
}
.input::placeholder {
color: var(--color-muted-foreground);
}
.input:focus-visible {
outline: 0;
box-shadow:
0 0 0 calc(var(--spacing) * .5) var(--color-background)
0 0 0 calc(var(--spacing) * 1) var(--color-primary);
}
@media (min-width: var(--breakpoint-md)) {
.input {
font-size: var(--text-sm);
}
}
.textarea {
border-radius: var(--radius-md);
height: calc(var(--spacing) * 40);
width: 100%;
border-width: 1px;
border-color: var(--color-border);
padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
background-color: var(--color-card);
color: var(--color-foreground);
outline: 2px solid transparent;
outline-offset: 2px;
}
.textarea::placeholder {
color: var(--color-muted-foreground);
}
.textarea:focus-visible {
outline: 0;
box-shadow:
0 0 0 calc(var(--spacing) * .5) var(--color-background)
0 0 0 calc(var(--spacing) * 1) var(--color-primary);
}
.label {
display: block;
font-size: var(--text-sm);
}
input[type=file] {
display: block;
width: 100%;
font-size: 0.875rem;
line-height: 1.25rem;
color: var(--color-foreground);
}
input[type=file]::file-selector-button {
margin-right: calc(var(--spacing) * 4);
padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
border-radius: calc(var(--spacing) * 2);
border-width: 0;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 500;
background-color: var(--color-primary);
color: rgb(var(--color-background));
}
input[type=file]::file-selector-button:hover {
opacity: 0.9;
}
.error {
font-size: var(--text-sm);
color: var(--color-red-600);
}
.form-muted-icon {
color: var(--color-muted-foreground);
}
.form-muted-icon:hover {
color: var(--color-foreground);
}
XavierHsiao liked a comment+100 XP
1mo ago
Color theme for those looking to copy:
--color-background: oklch(0.12 0 0);
--color-foreground: oklch(0.95 0 0);
--color-card: oklch(0.16 0 0);
--color-primary: oklch(0.65 0.15 160);
--color-primary-foreground: oklch(0.12 0 0);
--color-border: oklch(0.24 0 0);
--color-input: oklch(0.24 0 0);
--color-muted-foreground: oklch(0.6 0 0);
XavierHsiao liked a comment+100 XP
2mos ago
XavierHsiao wrote a comment+100 XP
2mos ago
@terdoo-mzer I think it's because /ideas/{idea} contains wild card so if it is defined before /ideas/create then all /ideas/... will go to /ideas/{idea}.
XavierHsiao liked a comment+100 XP
2mos ago