Build graf (#19585)

* build item

* update cta text

apps/www/components/LaunchWeek/X/Releases/BuildStage.tsx

@@ -36,7 +36,7 @@ const BuildStage: FC = () => {
         >
           {days.map((day, i) => (
             <li
-              key={day.id}
+              key={`${day.id}-${i}`}
               className={cn(
                 'relative flex flex-col w-full aspect-square rounded-xl border border-dashed border-muted/50 bg-surface-100/10 col-span-1',
                 day.className

apps/www/components/LaunchWeek/X/Releases/components/AdventCard.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from 'react'
 import Link from 'next/link'
 import { motion } from 'framer-motion'
 import Tilt from 'vanilla-tilt'
+import { useWindowSize } from 'react-use'
 import { cn } from 'ui'
 import { useBreakpoint } from 'common'
 
@@ -12,6 +13,7 @@ const AdventCard = ({ day, index }: { day: AdventDay; index: number }) => {
   const isTablet = useBreakpoint(1024)
   const ticketRef = useRef<HTMLDivElement>(null)
   const hiddenRef = useRef<HTMLDivElement>(null)
+  const { width } = useWindowSize()
   const [hiddenHeight, setHiddenHeight] = useState(0)
   const transition = { type: 'spring', damping: 10, mass: 0.75, stiffness: 100, delay: index / 15 }
   const variants = {
@@ -44,10 +46,11 @@ const AdventCard = ({ day, index }: { day: AdventDay; index: number }) => {
       const { height } = hiddenRef.current.getBoundingClientRect()
       setHiddenHeight(height)
     }
-  }, [hiddenRef])
+  }, [hiddenRef, width])
 
   return (
     <div
+      id={day.id}
       ref={ticketRef}
       className="absolute -inset-px group"
       style={{
@@ -55,7 +58,7 @@ const AdventCard = ({ day, index }: { day: AdventDay; index: number }) => {
       }}
     >
       <motion.div
-        className="opacity-0 flex flex-col justify-between w-full aspect-square p-4 md:p-6 lg:p-8 rounded-xl bg-[#121516] transition-colors text-[#575E61] border hover:border-strong overflow-hidden"
+        className="opacity-0 flex flex-col justify-between w-full aspect-square p-6 lg:p-8 rounded-xl bg-[#121516] transition-colors text-[#575E61] border hover:border-strong overflow-hidden"
         variants={variants}
       >
         <div className="opacity-30 group-hover:opacity-100 transition-opacity">{day.icon}</div>

apps/www/components/LaunchWeek/X/Releases/data/lwx_advent_days.tsx

@@ -121,7 +121,7 @@ export const days: AdventDay[] = [
         />
       </svg>
     ),
-    id: '',
+    id: 'design-at-supabase',
     is_shipped: true,
     links: [
       {
@@ -132,16 +132,31 @@ export const days: AdventDay[] = [
     image: '',
   },
   {
-    title: '',
+    title: 'Supabase Grafana',
+    description: 'Observability for your Supabase project',
     type: '',
-    is_shipped: false,
+    is_shipped: true,
     className: '',
-    icon: '',
-    id: '',
+    icon: (
+      <svg
+        width="34"
+        height="36"
+        viewBox="0 0 34 36"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M33.4652 15.7973C33.4026 15.2339 33.34 14.5452 33.0896 13.794C32.9017 13.0427 32.5887 12.2288 32.1505 11.3523C31.7122 10.4759 31.1488 9.59936 30.4601 8.72288C30.2097 8.40986 29.8967 8.03422 29.5211 7.7212C30.0219 5.71781 28.895 4.02746 28.895 4.02746C27.0168 3.90224 25.7647 4.5909 25.3264 4.96654C25.2639 4.96654 25.2012 4.90394 25.076 4.84132C24.763 4.71612 24.45 4.5909 24.0743 4.4657C23.6987 4.34048 23.3857 4.27788 23.01 4.15266C22.6344 4.09006 22.2587 4.02746 21.9457 3.96484C21.8831 3.96484 21.8205 3.96484 21.7579 3.96484C20.944 1.3354 18.565 0.208496 18.565 0.208496C15.9356 1.89886 15.4347 4.21527 15.4347 4.21527C15.4347 4.21527 15.4347 4.27788 15.4347 4.34048C15.3095 4.40308 15.1217 4.40308 14.9965 4.4657C14.8086 4.5283 14.6208 4.5909 14.3704 4.65352C14.1826 4.71612 13.9948 4.77872 13.7443 4.90394C13.3687 5.09176 12.9305 5.27956 12.5548 5.46738C12.1792 5.6552 11.8036 5.90562 11.4279 6.15606C11.3653 6.15606 11.3653 6.09344 11.3653 6.09344C7.67159 4.71612 4.41608 6.40648 4.41608 6.40648C4.10306 10.288 5.85602 12.7923 6.23166 13.2305C6.16904 13.4809 6.04384 13.7314 5.98123 13.9818C5.73081 14.8583 5.48038 15.7973 5.35518 16.7365C5.35518 16.8617 5.29256 16.9869 5.29256 17.1121C1.91185 18.8024 0.910156 22.2457 0.910156 22.2457C3.72742 25.5013 7.04553 25.689 7.04553 25.689C7.48378 26.4404 7.92202 27.1289 8.48546 27.8176C8.73588 28.068 8.98631 28.3811 9.17413 28.6315C8.17244 31.574 9.29934 34.0157 9.29934 34.0157C12.4296 34.1409 14.4956 32.6383 14.9339 32.2627C15.2469 32.3879 15.5599 32.4504 15.8729 32.5758C16.812 32.8262 17.8138 32.9514 18.8154 33.0139C19.0658 33.0139 19.3163 33.0139 19.5667 33.0139H19.6919H19.7545H19.8797H20.0049C21.5075 35.1425 24.0743 35.4556 24.0743 35.4556C25.9525 33.5147 26.0151 31.574 26.0151 31.1357V31.0732V31.0105C26.3907 30.7601 26.7663 30.4472 27.142 30.1341C27.8933 29.4454 28.5193 28.6942 29.0828 27.8803C29.1454 27.8176 29.208 27.7551 29.208 27.6299C31.3366 27.7551 32.7765 26.3152 32.7765 26.3152C32.4009 24.1239 31.1487 23.0596 30.8983 22.8719H30.8358C30.8358 22.7465 30.8358 22.6213 30.8358 22.4961C30.8358 22.2457 30.8358 21.9953 30.8358 21.8076V21.4945V21.4318V21.3693V21.3066V21.1814V20.9937C30.8358 20.931 30.8358 20.8685 30.8358 20.8058C30.8358 20.7433 30.8358 20.6806 30.8358 20.6179V20.4302V20.2423C30.7731 19.9919 30.7731 19.7415 30.7106 19.5536C30.4601 18.6147 30.1471 17.7381 29.6463 16.9242C29.1454 16.1104 28.582 15.4217 27.8933 14.7957C27.2046 14.1696 26.4534 13.7314 25.6395 13.3557C24.8256 12.9801 24.0117 12.7923 23.1353 12.6671C22.697 12.6044 22.3214 12.6044 21.8831 12.6044H21.7579H21.6953H21.6327H21.5701H21.4449C21.3823 12.6044 21.3196 12.6044 21.2571 12.6044C21.0692 12.6044 20.8188 12.6671 20.631 12.6671C19.8171 12.7923 19.0033 13.1053 18.3146 13.5435C17.6259 13.9818 16.9999 14.4826 16.499 15.0461C15.9982 15.6095 15.6225 16.2982 15.3721 16.9869C15.1217 17.6756 14.9965 18.3641 14.9339 19.0528C14.9339 19.2407 14.9339 19.3659 14.9339 19.5536C14.9339 19.6163 14.9339 19.6163 14.9339 19.679V19.8042C14.9339 19.8667 14.9339 19.9919 14.9339 20.0546C14.9965 20.3675 15.0591 20.7433 15.1217 21.0562C15.3095 21.6822 15.6225 22.2457 15.9356 22.7465C16.3112 23.2475 16.7494 23.6231 17.1877 23.936C17.6259 24.2491 18.1268 24.4995 18.6276 24.6247C19.1285 24.7499 19.5667 24.8126 20.0676 24.8126C20.1301 24.8126 20.1928 24.8126 20.2553 24.8126H20.318H20.3806C20.4432 24.8126 20.5058 24.8126 20.5058 24.8126C20.5058 24.8126 20.5058 24.8126 20.5684 24.8126H20.631H20.6936C20.7562 24.8126 20.8188 24.8126 20.8814 24.8126C20.944 24.8126 21.0067 24.8126 21.0692 24.7499C21.1944 24.7499 21.2571 24.6874 21.3823 24.6874C21.5701 24.6247 21.7579 24.5622 21.9457 24.437C22.1335 24.3743 22.2587 24.2491 22.4466 24.1239C22.5091 24.1239 22.5092 24.0614 22.5718 23.9987C22.7596 23.8735 22.7596 23.6231 22.6344 23.4979C22.5092 23.3727 22.3214 23.31 22.1962 23.4352C22.1335 23.4352 22.1335 23.4979 22.071 23.4979C21.9457 23.5604 21.8205 23.6231 21.6327 23.6856C21.5075 23.7483 21.3196 23.7483 21.1944 23.8108C21.1319 23.8108 21.0067 23.8108 20.944 23.8108C20.8814 23.8108 20.8814 23.8108 20.8188 23.8108C20.7562 23.8108 20.7562 23.8108 20.6936 23.8108C20.631 23.8108 20.631 23.8108 20.5684 23.8108C20.5058 23.8108 20.4432 23.8108 20.4432 23.8108H20.3806H20.318C20.2553 23.8108 20.2554 23.8108 20.1928 23.8108C19.8171 23.7483 19.5041 23.6856 19.1285 23.4979C18.7528 23.3727 18.4398 23.1223 18.1267 22.8719C17.8138 22.6213 17.5633 22.2457 17.3755 21.9328C17.1877 21.6197 16.9999 21.1814 16.9372 20.7433C16.8746 20.5554 16.8746 20.305 16.8746 20.1171C16.8746 20.0546 16.8746 19.9919 16.8746 19.9294V19.8667V19.8042C16.8746 19.679 16.8746 19.5536 16.9372 19.4284C17.1251 18.4893 17.5633 17.6129 18.3146 16.8617C18.5024 16.6738 18.6902 16.5486 18.8781 16.3607C19.0658 16.2355 19.3163 16.1104 19.5041 15.9852C19.7545 15.86 20.0049 15.7973 20.1928 15.7347C20.4432 15.6721 20.6936 15.6095 20.944 15.6095C21.0692 15.6095 21.1944 15.6095 21.3196 15.6095H21.3823H21.5075H21.5701H21.6953C21.9457 15.6095 22.2587 15.6721 22.5091 15.7347C23.07Line truncated
+          fill="#EDEDED"
+        />
+      </svg>
+    ),
+    id: 'supabase-grafana',
     links: [
       {
-        url: '',
-        label: '',
+        url: 'https://github.com/supabase/supabase-grafana',
+        label: 'View on GitHub',
+        target: '_blank',
       },
     ],
     image: '',