chadtmiller.com
Search interface for Tangled running on a Slice
1import { type ComponentChildren } from "preact";
2
3const Layout = ({
4 children,
5 head,
6 title = "TANGLED://SEARCH_v1.3.1",
7}: {
8 children: ComponentChildren;
9 head?: ComponentChildren;
10 title?: string;
11}) => (
12 <html>
13 <head>
14 <meta charset="UTF-8" />
15 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
16 <title>{title}</title>
17 {head}
18 <script src="https://unpkg.com/htmx.org@2.0.3"></script>
19 <script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
20 <script src="https://cdn.tailwindcss.com"></script>
21 <link rel="preconnect" href="https://fonts.googleapis.com" />
22 <link
23 rel="preconnect"
24 href="https://fonts.gstatic.com"
25 crossOrigin="anonymous"
26 />
27 <link
28 href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap"
29 rel="stylesheet"
30 />
31 <script>{`
32 tailwind.config = {
33 theme: {
34 extend: {
35 fontFamily: {
36 'mono': ['JetBrains Mono', 'monospace'],
37 },
38 animation: {
39 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
40 }
41 }
42 }
43 }
44 `}</script>
45 <style type="text/tailwindcss">{`
46 .filter-btn {
47 @apply bg-cyan-500/10 text-cyan-400;
48 }
49 .filter-btn.filter-active {
50 @apply bg-cyan-500/30 text-cyan-300;
51 }
52 @media (max-width: 639px) {
53 .mobile-sticky {
54 @apply sticky top-0 z-20 bg-black/95 backdrop-blur-md;
55 }
56 }
57 .htmx-indicator {
58 display: none;
59 }
60 .htmx-request .htmx-indicator {
61 display: flex;
62 }
63 `}</style>
64 </head>
65 <body class="bg-black min-h-screen font-mono flex justify-center sm:items-center">
66 <div class="fixed inset-0 bg-gradient-to-br from-cyan-900/20 via-purple-900/20 to-pink-900/20"></div>
67 {children}
68 </body>
69 </html>
70);
71
72export default Layout;