Add an alert for current users

web/components/user-page.tsx

@@ -227,7 +227,15 @@ export function UserPage(props: {
               },
               {
                 title: 'Bets',
-                content: <BetsList user={user} />,
+                content: (
+                  <div>
+                    <AlertBox
+                      title="Bets are becoming public on June 1st"
+                      text="hi"
+                    />
+                    {isCurrentUser && <BetsList user={user} />}
+                  </div>
+                ),
                 tabIcon: (
                   <div className="px-0.5 font-bold">{usersBets.length}</div>
                 ),
@@ -254,3 +262,27 @@ export function defaultBannerUrl(userId: string) {
   ]
   return defaultBanner[genHash(userId)() % defaultBanner.length]
 }
+
+import { ExclamationIcon } from '@heroicons/react/solid'
+
+function AlertBox(props: { title: string; text: string }) {
+  const { title, text } = props
+  return (
+    <div className="rounded-md bg-yellow-50 p-4">
+      <div className="flex">
+        <div className="flex-shrink-0">
+          <ExclamationIcon
+            className="h-5 w-5 text-yellow-400"
+            aria-hidden="true"
+          />
+        </div>
+        <div className="ml-3">
+          <h3 className="text-sm font-medium text-yellow-800">{title}</h3>
+          <div className="mt-2 text-sm text-yellow-700">
+            <Linkify text={text} />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}