initial headless components usage

src/components/Navbar.tsx

@@ -4,6 +4,7 @@ import Link from "next/link";
 import { Show, UserButton } from "@clerk/nextjs";
 
 import { isDemoMode } from "../utils/demoContext";
+import { TrialDetails } from "./TrialDetails";
 
 const Navbar = () => {
   return (
@@ -42,6 +43,7 @@ const Navbar = () => {
           ) : (
             <Show when="signed-in">
               <UserButton />
+              <TrialDetails />
             </Show>
           )}
         </div>

src/components/TrialDetails.tsx

@@ -0,0 +1,39 @@
+import { TrialPill, useTrialPill } from "@schematichq/schematic-components";
+import { useSchematicPlan } from "@schematichq/schematic-react";
+
+export const TrialDetails = () => {
+  const plan = useSchematicPlan();
+  const trial = useTrialPill({
+    trialEndDate: plan?.trialEndDate,
+    trialStatus: plan?.trialStatus,
+  });
+
+  return (
+    <TrialPill.Root
+      trialEndDate={plan?.trialEndDate}
+      trialStatus={plan?.trialStatus}
+    >
+      <TrialPill.Label>{plan?.name}</TrialPill.Label>
+
+      {plan?.trialEndDate && (
+        <TrialPill.TimeRemaining>
+          Trial ends in {trial.endDateLabel}
+        </TrialPill.TimeRemaining>
+      )}
+
+      <style>{`
+        .schematic-trial-pill {
+          font-size: 12px;
+          font-weight: 300;
+          line-height: 1.25;
+        }
+
+        .schematic-trial-pill__label {
+          display: block;
+          font-size: 14px;
+          font-weight: 500;
+        }
+      `}</style>
+    </TrialPill.Root>
+  );
+};

src/components/UsageDetails.tsx

@@ -0,0 +1,50 @@
+import { UsageMeter } from "@schematichq/schematic-components";
+
+interface UsageDetailsProps {
+  value?: number;
+  max?: number;
+}
+
+export const UsageDetails = ({ value = 0, max = 0 }: UsageDetailsProps) => {
+  const percent = (value / max) * 100;
+
+  return (
+    <UsageMeter.Root value={value} max={max}>
+      {value > 0 && max > 0 && (
+        <UsageMeter.Track>
+          <UsageMeter.Fill
+            style={{
+              width: `${percent}%`,
+              background: `color-mix(in hsl, green, red ${percent}%)`,
+            }}
+          />
+        </UsageMeter.Track>
+      )}
+
+      <UsageMeter.ValueText>
+        {value} / {max || "?"} used
+      </UsageMeter.ValueText>
+
+      <style>{`
+        .schematic-usage-meter__label {
+          font-size: 14px;
+          font-weight: 500;
+        }
+
+        .schematic-usage-meter__track {
+          height: 0.5rem;
+          margin-top: ${1 / 3}rem;
+          background: oklch(60% 0 0deg);
+          border-radius: 2px;
+          overflow: hidden;
+        }
+
+        .schematic-usage-meter__fill {
+          height: 100%;
+          transition: width 200ms ease;
+          border-right: 1px solid oklch(50% 0 0deg);
+        }
+      `}</style>
+    </UsageMeter.Root>
+  );
+};

src/components/Weather.tsx

@@ -13,6 +13,7 @@ import {
 
 import useSavedLocations from "../hooks/useSavedLocations";
 import Loader from "./Loader";
+import { UsageDetails } from "./UsageDetails";
 
 interface WeatherData {
   description: string;
@@ -61,14 +62,15 @@ const Weather: React.FC = () => {
   const { track } = useSchematicEvents();
   const schematicIsPending = useSchematicIsPending();
   const humidityFlag = useSchematicFlag("humidity");
+  const weatherSearch = useSchematicEntitlement("weather-search");
   const {
     featureAllocation: weatherSearchAllocation,
     featureUsage: weatherSearchUsage,
     featureUsageExceeded: weatherSearchUsageExceeded,
     featureUsagePeriod: weatherSearchUsagePeriod,
     featureUsageResetAt: weatherSearchUsageResetAt,
     value: weatherSearchFlag,
-  } = useSchematicEntitlement("weather-search");
+  } = weatherSearch;
   const windSpeedFlag = useSchematicFlag("wind-speed");
   const addPinnedLocationFlag = useSchematicFlag("pinned-locations");
   const savedLocations = useSavedLocations();
@@ -225,13 +227,14 @@ const Weather: React.FC = () => {
         </div>
       )}
       <div className="weather-container">
-        {!schematicIsPending &&
-          typeof weatherSearchUsage !== "undefined" &&
-          typeof weatherSearchAllocation !== "undefined" && (
-            <div className="usage-pill">
-              {weatherSearchUsage} / {weatherSearchAllocation} used
-            </div>
-          )}
+        {!schematicIsPending && (
+          <div className="usage-floater">
+            <UsageDetails
+              value={weatherSearchUsage}
+              max={weatherSearchAllocation}
+            />
+          </div>
+        )}
         <div className="search-container">
           <input
             type="text"
@@ -337,7 +340,7 @@ const Weather: React.FC = () => {
           font-family: "Helvetica Neue", Arial, sans-serif;
           position: relative;
         }
-        .usage-pill {
+        .usage-floater {
           float: right;
           background-color: rgba(0, 0, 0, 0.4);
           color: rgba(255, 255, 255, 0.9);