little changes

Author: BetrixDev

app/components/account-tier-text.tsx

@@ -4,26 +4,40 @@ export function AccountTierText({
   accountTier,
   children,
   defaultColor = "text-inherit",
+  className,
 }: {
   accountTier: string;
   children: React.ReactNode;
   defaultColor?: string;
+  className?: string;
 }) {
   if (accountTier.toLowerCase() === "pro") {
     return (
-      <span className="bg-gradient-to-r from-orange-400 to-red-400 bg-clip-text text-transparent font-bold">
+      <span
+        className={cn(
+          "bg-gradient-to-r from-orange-400 to-red-400 bg-clip-text text-transparent font-bold",
+          className
+        )}
+      >
         {children}
       </span>
     );
   }
 
   if (accountTier.toLowerCase() === "premium") {
     return (
-      <span className="bg-gradient-to-r from-pink-500 to-purple-300 bg-clip-text text-transparent font-bold">
+      <span
+        className={cn(
+          "bg-gradient-to-r from-pink-500 to-purple-300 bg-clip-text text-transparent font-bold",
+          className
+        )}
+      >
         {children}
       </span>
     );
   }
 
-  return <span className={cn(defaultColor, "font-bold")}>{children}</span>;
+  return (
+    <span className={cn(defaultColor, "font-bold", className)}>{children}</span>
+  );
 }

app/components/top-nav.tsx

@@ -1,4 +1,9 @@
-import { SignedIn, SignedOut, UserButton } from "@clerk/tanstack-start";
+import {
+  SignedIn,
+  SignedOut,
+  UserButton,
+  useUser,
+} from "@clerk/tanstack-start";
 import { Video } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
@@ -8,8 +13,15 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Link } from "@tanstack/react-router";
+import { AccountTierText } from "./account-tier-text";
+import { Badge } from "./ui/badge";
+import { safeParseAccountTier, TIER_TO_TEXT } from "@/lib/utils";
 
 export default function TopNav() {
+  const { user } = useUser();
+
+  const accountTier = safeParseAccountTier(user?.publicMetadata?.accountTier);
+
   return (
     <div className="sticky md:top-2 flex justify-center z-[99] w-full">
       <header className="px-3 max-w-[64rem] md:w-[90%] w-full bg-white/95 md:dark:bg-zinc-950/30 dark:bg-zinc-950/50 md:border border-border/50 border-b md:rounded-full flex items-center justify-between h-14 reltive backdrop-blur-md shadow-sm sticky">
@@ -129,7 +141,16 @@ export default function TopNav() {
           </DropdownMenu>
         </SignedOut>
         <SignedIn>
-          <span className="md:flex hidden items-center">
+          <span className="md:flex hidden items-center gap-2">
+            <Badge variant="outline" className="h-8">
+              <AccountTierText
+                accountTier={accountTier}
+                className="pointer-events-none"
+              >
+                {TIER_TO_TEXT[accountTier]} Tier
+              </AccountTierText>
+            </Badge>
+
             <UserButton />
           </span>
           <span className="flex md:hidden items-center">

app/globals.css

@@ -1,11 +1,11 @@
-@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap");
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 body {
-  font-family: "DM Sans", Arial, Helvetica, sans-serif;
+  font-family: "Geist", Arial, Helvetica, sans-serif;
   letter-spacing: 0.05rem;
 }
 

app/lib/utils.ts

@@ -75,7 +75,9 @@ export function formatBytes(
   const i = Math.floor(Math.log(bytes) / Math.log(1024));
 
   return `${(bytes / 1024 ** i).toFixed(decimals)} ${
-    sizeType === "accurate" ? accurateSizes[i] ?? "Bytes" : sizes[i] ?? "Bytes"
+    sizeType === "accurate"
+      ? (accurateSizes[i] ?? "Bytes")
+      : (sizes[i] ?? "Bytes")
   }`;
 }
 
@@ -96,6 +98,13 @@ export function safeParseAccountTier(tier: unknown) {
   return parsed.data;
 }
 
+export const TIER_TO_TEXT = {
+  free: "Free",
+  pro: "Pro",
+  premium: "Premium",
+  ultimate: "Ultimate",
+};
+
 export function getIpFromHeaders(headers: Headers) {
   const forwardedFor = headers.get("x-forwarded-for");
   const realIp = headers.get("x-real-ip");

app/routes/__root.tsx

@@ -99,7 +99,7 @@ function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
           <head>
             <HeadContent />
           </head>
-          <body className="antialiased font-dmSans">
+          <body className="antialiased font-geist">
             <div vaul-drawer-wrapper="">{children}</div>
             <Toaster theme="dark" />
             <TanStackRouterDevtools position="bottom-right" />

app/routes/index.tsx

@@ -20,7 +20,7 @@ function RouteComponent() {
             <div className="container px-4 md:px-6">
               <div className="flex flex-col items-center space-y-4 text-center">
                 <div className="space-y-2">
-                  <h1 className="text-4xl sm:text-6xl font-bold text-primary bg-clip-text">
+                  <h1 className="text-4xl sm:text-6xl font-bold text-primary bg-clip-text tracking-tight">
                     Share Videos in a Flash
                   </h1>
                   <p className="mx-auto max-w-[700px] text-gray-500 md:text-xl dark:text-gray-400">

app/trigger/scheduled/delete-videos.ts

@@ -5,6 +5,9 @@ import type { videoDeletionTask } from "../video-deletion.js";
 export const deleteVideosScheduledTask = schedules.task({
   id: "delete-videos",
   cron: "0 * * * *",
+  machine: {
+    preset: "micro",
+  },
   run: async () => {
     const videosToDelete = await logger.trace(
       "Postgres videos to delete",

app/trigger/scheduled/increment-views.ts

@@ -9,6 +9,9 @@ const BATCH_SIZE = 15;
 export const incrementViewsScheduledTask = schedules.task({
   id: "increment-views",
   cron: "*/5 * * * *",
+  machine: {
+    preset: "micro",
+  },
   run: async () => {
     const { env } = await import("../../../app/lib/env");
 

tailwind.config.ts

@@ -13,7 +13,7 @@ export default {
   theme: {
     extend: {
       fontFamily: {
-        dmSans: '"DM Sans"',
+        geist: '"Geist"',
       },
       colors: {
         background: "hsl(var(--background))",