See the best posts from any Bluesky account
Extract theme toggle button into a shared partial
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
+11
-18
+1
-9
resources/views/components/layout.edge
+1
-9
resources/views/components/layout.edge
···
52
52
@component('components/search_ahead', { size: 'sm' })
53
53
@endcomponent
54
54
</form>
55
-
<button
56
-
x-data="darkMode"
57
-
x-on:click="toggle"
58
-
class="p-1.5 rounded-md text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-800 cursor-pointer"
59
-
aria-label="Toggle dark mode"
60
-
>
61
-
<i x-show="!dark" class="ph-fill ph-moon text-base"></i>
62
-
<i x-show="dark" class="ph-fill ph-sun text-base"></i>
63
-
</button>
55
+
@include('partials/theme_toggle')
64
56
@include('partials/auth_buttons')
65
57
</div>
66
58
</div>
+1
-9
resources/views/pages/landing.edge
+1
-9
resources/views/pages/landing.edge
···
17
17
favs.blue
18
18
</h1>
19
19
<div class="flex items-center gap-2">
20
-
<button
21
-
x-data="darkMode"
22
-
x-on:click="toggle"
23
-
class="p-1.5 rounded-md text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-800 cursor-pointer transition-colors duration-200"
24
-
aria-label="Toggle dark mode"
25
-
>
26
-
<i x-show="!dark" class="ph-fill ph-moon text-base"></i>
27
-
<i x-show="dark" class="ph-fill ph-sun text-base"></i>
28
-
</button>
20
+
@include('partials/theme_toggle')
29
21
@include('partials/auth_buttons')
30
22
</div>
31
23
</div>
+9
resources/views/partials/theme_toggle.edge
+9
resources/views/partials/theme_toggle.edge
···
1
+
<button
2
+
x-data="darkMode"
3
+
x-on:click="toggle"
4
+
class="size-8 inline-flex items-center justify-center rounded-md text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-800 cursor-pointer transition-colors duration-200"
5
+
aria-label="Toggle dark mode"
6
+
>
7
+
<i x-show="!dark" class="ph-fill ph-moon text-base"></i>
8
+
<i x-show="dark" class="ph-fill ph-sun text-base"></i>
9
+
</button>