wikipedia banner ad
natalie.sh
banner-ad.tsx
1import { createSignal, Show } from "solid-js";
2
3export const BannerAd = () => {
4 const [isExpanded, setIsExpanded] = createSignal(false);
5 const [isVisible, setIsVisible] = createSignal(true);
6
7 const toggleExpand = () => {
8 setIsExpanded(!isExpanded());
9 };
10
11 const dismiss = () => {
12 setIsVisible(false);
13 };
14
15 // hook to auto expand after 2 seconds
16 setTimeout(() => {
17 setIsExpanded(true);
18 }, 200);
19
20 const formattedDate = new Date().toLocaleDateString(undefined, {
21 month: "long",
22 day: "numeric",
23 });
24
25 const randomAmount = Math.floor(Math.random() * 700) / 100;
26 const donationAmount = `$${randomAmount}`;
27
28 return (
29 <Show when={isVisible()}>
30 <div
31 class="overflow-hidden rounded-xl bg-red-800 transition-[max-height] duration-3500 ease-in"
32 style={{
33 "max-height": isExpanded() ? "1000px" : "0px",
34 }}
35 >
36 <div class="relative mx-auto max-w-7xl px-4 py-3 sm:px-6 lg:pr-8">
37 <button
38 type="button"
39 onclick={setIsExpanded.bind(null, false)}
40 class="absolute top-0 right-0 aspect-square rounded-md p-2 text-neutral-500 transition-colors hover:bg-neutral-200/50 hover:text-neutral-700 dark:text-neutral-400 dark:hover:bg-neutral-700/50 dark:hover:text-neutral-200"
41 aria-label="Dismiss banner"
42 >
43 <span class="iconify lucide--x -mb-0.5 aspect-square"></span>
44 </button>
45 <div class="flex items-center justify-between gap-4">
46 <div class="flex min-w-0 flex-1 items-center gap-3">
47 <span class="iconify lucide--badge-info mt-2 mb-auto shrink-0 text-2xl text-blue-600 dark:text-blue-300"></span>
48 <div class="min-w-0 flex-1">
49 <p class="mt-1 text-2xl font-medium text-neutral-900 dark:text-neutral-100">
50 The protocol we were promised
51 </p>
52 <p class="mt-2 text-base font-medium text-neutral-700 dark:text-neutral-300">
53 {formattedDate}: An important update for developers and users in the ATProto
54 ecosystem.
55 </p>
56 <p class="mt-2 text-base text-neutral-700 dark:text-neutral-300">
57 You deserve an explanation, so please don't skip this 1-minute read. It's{" "}
58 {formattedDate}, and our fundraiser won't last long. If you've lost count of how
59 many times you've used PDSls this year, whether you're browsing feeds, running
60 tooling, or hosting your own PDS, we hope that means it's given you real value.
61 Please join the small percentage of users who give what they can to help keep this
62 valuable resource free, open, and available for everyone.
63 </p>
64 <p class="mt-2 text-base text-neutral-700 dark:text-neutral-300">
65 After a year, PDSls is still the tool we were promised—a utility for open,
66 decentralized infrastructure. By using the AT Protocol today, you're choosing a
67 free internet: one where you control your data, find communities without
68 algorithmic manipulation, and build without depending on corporate gatekeepers.
69 </p>
70 <p class="mt-2 text-base text-neutral-700 dark:text-neutral-300">
71 Most users don't donate, so your gift matters. If PDSls has given you{" "}
72 {donationAmount} of value, please donate {donationAmount} right now—or consider a
73 monthly gift to help sustain development all year long. Thank you.
74 </p>
75
76 <p class="font-pecita mt-2 text-xl text-neutral-700 dark:text-neutral-300">
77 - Juliet
78 </p>
79
80 <div class="mt-4 space-y-3 border-t pt-4">
81 <div>
82 <p class="mb-2 text-base font-medium text-neutral-900 dark:text-neutral-100">
83 1. How often would you like to donate?
84 </p>
85 <div class="flex flex-wrap gap-3">
86 <label class="flex items-center gap-2">
87 <input type="radio" name="frequency" value="once" checked class="h-4 w-4" />
88 <span class="text-base font-semibold">Once</span>
89 </label>
90 <label class="flex items-center gap-2">
91 <input type="radio" name="frequency" value="monthly" class="h-4 w-4" />
92 <span class="text-base font-semibold">Monthly</span>
93 </label>
94 <label class="flex items-center gap-2">
95 <input type="radio" name="frequency" value="annual" class="h-4 w-4" />
96 <span class="text-base font-semibold">Annual</span>
97 </label>
98 </div>
99 <p class="ml-20 text-xs dark:text-red-300">Support PDSls year-round</p>
100 </div>
101
102 <div>
103 <p class="mb-2 text-base font-medium text-neutral-900 dark:text-neutral-100">
104 2. Please select an amount (USD)
105 </p>
106 <p class="mb-2 text-xs text-neutral-600 dark:text-neutral-400">
107 The average donation in the United States is around $13.
108 </p>
109 <div class="grid grid-cols-3 gap-2">
110 <label class="flex items-center gap-2">
111 <input type="radio" name="amount" value="2.75" class="h-4 w-4" />
112 <span class="text-base font-semibold">{donationAmount}</span>
113 </label>
114 <label class="flex items-center gap-2">
115 <input type="radio" name="amount" value="15" class="h-4 w-4" />
116 <span class="text-base font-semibold">$15</span>
117 </label>
118 <label class="flex items-center gap-2">
119 <input type="radio" name="amount" value="25" class="h-4 w-4" />
120 <span class="text-base font-semibold">$25</span>
121 </label>
122 <label class="flex items-center gap-2">
123 <input type="radio" name="amount" value="50" class="h-4 w-4" />
124 <span class="text-base font-semibold">$50</span>
125 </label>
126 <label class="flex items-center gap-2">
127 <input type="radio" name="amount" value="100" class="h-4 w-4" />
128 <span class="text-base font-semibold">$100</span>
129 </label>
130 <label class="flex items-center gap-2">
131 <input type="radio" name="amount" value="250" class="h-4 w-4" />
132 <span class="text-base font-semibold">$250</span>
133 </label>
134 <label class="flex items-center gap-2">
135 <input type="radio" name="amount" value="500" class="h-4 w-4" />
136 <span class="text-base font-semibold">$500</span>
137 </label>
138 <label class="flex items-center gap-2">
139 <input type="radio" name="amount" value="other" class="h-4 w-4" />
140 <span class="text-base font-semibold">Other</span>
141 </label>
142 </div>
143 </div>
144
145 <div>
146 <p class="mb-2 text-base font-medium text-neutral-900 dark:text-neutral-100">
147 3. Please select a payment method
148 </p>
149 <div class="grid grid-cols-3 gap-2">
150 <button
151 type="button"
152 class="flex items-center justify-center gap-2 rounded border border-neutral-300 bg-white px-3 py-2 text-base font-semibold transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:hover:bg-neutral-700"
153 >
154 <img
155 src="https://kagi.com/proxy/110-1105172_paypal-new-logo-merchant-accounts-online-merchant-paypal-logo-png.png?c=SYXRosL0JFAnlGeOt8kB0Jktas5N9Vbjt8cEXa27yJsAd1LTTlyV3rSJ8USu1IVzBOGAh_zLYYOt-Moq7O3LMyIqDXrklv16pXm0Av-jCDfgbBVEUggUU4uqFp1K_PGBkGqUuqOHb4G_-3dE3T2G6DityzTnYCFiXHSNFq8alFri9ISkZCz0IgfM7MhnnQWP"
156 alt="PayPal"
157 class="h-5 w-auto"
158 />
159 </button>
160 <button
161 type="button"
162 class="flex items-center justify-center gap-2 rounded border border-neutral-300 bg-white px-3 py-2 text-base font-semibold transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:hover:bg-neutral-700"
163 >
164 <img
165 src="https://kagi.com/proxy/960px-Venmo_Logo.svg.png?c=9cn5Kxse4yD05EJkf6QML9dK4clUbdQ9Oq4d5gDoyHBwiX43u0CCAEVi8DMCHFAXB_4SPMIM3XonpLx3YAbGFdKN5oLtvbZkeI1qfMNgNuR5EHe63vp7STkzzJvEJCaJx-59UH9sb9WYRqYaLJ6KQQ%3D%3D"
166 alt="Venmo"
167 class="h-5 w-auto"
168 />
169 </button>
170 <button
171 type="button"
172 class="flex items-center justify-center gap-2 rounded border border-neutral-300 bg-white px-3 py-2 text-base font-semibold transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:hover:bg-neutral-700"
173 >
174 <img
175 src="https://kagi.com/proxy/1280px-Apple_Pay_logo.svg.png?c=9cn5Kxse4yD05EJkf6QML9dK4clUbdQ9Oq4d5gDoyHBwiX43u0CCAEVi8DMCHFAXmg1ajdVNJfnUy93IEnIHpsT89SSh6N04Z2tlt9tAfjsdfsX8mknl0r-KpZLErORH3kcyJBtZpQ6wGw77721JBtUsNg5B0z4c4mCYBTESF0M%3D"
176 alt="Apple Pay"
177 class="h-5 w-auto"
178 />
179 </button>
180 </div>
181 </div>
182
183 <button
184 type="button"
185 class="w-full rounded-md bg-neutral-300 px-4 py-2 text-base font-semibold text-neutral-500 dark:bg-neutral-600 dark:text-neutral-400"
186 disabled
187 >
188 Continue
189 </button>
190 </div>
191 </div>
192 </div>
193 </div>
194 </div>
195 </div>
196 </Show>
197 );
198};