Repository: supabase/supabase
File: apps/studio/components/interfaces/Storage/AnalyticsBuckets/index.tsx (TypeScript)

Code before:
      </Admonition>

      {!isLoadingBuckets &&
      buckets.filter((bucket) => !('type' in bucket) || bucket.type === 'ANALYTICS').length ===
        0 ? (
        <EmptyBucketState bucketType="analytics" />
      ) : (
        <div className="flex flex-col gap-y-4">
          <ScaffoldHeader className="py-0 flex flex-row items-baseline gap-x-2">
            <ScaffoldSectionTitle>Buckets</ScaffoldSectionTitle>
            {analyticsBuckets.length > 0 && (
              <span className="bg-surface-200 rounded-full px-1.5 py-1 leading-none text-xs text-foreground-lighter tracking-widest">
                {analyticsBuckets.length}
                /2
              </span>
            )}
          </ScaffoldHeader>
          <div className="flex flex-grow justify-between gap-x-2 items-center">
            <Input
              size="tiny"
              className="flex-grow lg:flex-grow-0 w-52"
              placeholder="Search for a bucket"
              value={filterString}
              onChange={(e) => setFilterString(e.target.value)}
              icon={<Search size={12} />}
            />
            <CreateAnalyticsBucketModal buttonType="primary" buttonClassName="w-fit" />
          </div>

          {isLoadingBuckets ? (
            <GenericSkeletonLoader />
          ) : (
            <Card>
              <Table>
                <TableHeader>
                  <TableRow>
                    {analyticsBuckets.length > 0 && (
                      <TableHead className="w-2 pr-1">
                        <span className="sr-only">Icon</span>
                      </TableHead>
                    )}
                    <TableHead>Name</TableHead>
                    <TableHead>Created at</TableHead>
                    <TableHead>
                      <span className="sr-only">Actions</span>
                    </TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {analyticsBuckets.length === 0 && filterString.length > 0 && (
                    <TableRow className="[&>td]:hover:bg-inherit">

Review comment (suggestion):
Conditionally show the limit count when getting close.

Another case of hardcoded `2` limit for max buckets.

Code after:
            </Link>
          </Button>
        </div>
      </Admonition>

      {!isLoadingBuckets &&
      buckets.filter((bucket) => !('type' in bucket) || bucket.type === 'ANALYTICS').length ===
        0 ? (
        <EmptyBucketState bucketType="analytics" />
      ) : (
        <div className="flex flex-col gap-y-4">
          <ScaffoldHeader className="py-0 flex flex-row items-center gap-x-2">
            <ScaffoldSectionTitle>Buckets</ScaffoldSectionTitle>
            {analyticsBuckets.length > 0 && (
              <Tooltip>
                <TooltipTrigger>
                  <span className="bg-surface-200 rounded-full px-2 py-1 leading-none text-xs text-foreground-lighter tracking-widest">
                    {analyticsBuckets.length}
                    /2
                  </span>
                </TooltipTrigger>
                <TooltipContent side="bottom" className="w-64 text-center">
                  Each project can only have up to 2 buckets while analytics buckets are in alpha{' '}
                </TooltipContent>
              </Tooltip>
            )}
          </ScaffoldHeader>
          <div className="flex flex-grow justify-between gap-x-2 items-center">
            <Input
              size="tiny"
              className="flex-grow lg:flex-grow-0 w-52"
              placeholder="Search for a bucket"
              value={filterString}
              onChange={(e) => setFilterString(e.target.value)}
              icon={<Search size={12} />}
            />
            <CreateAnalyticsBucketModal buttonType="primary" buttonClassName="w-fit" />
          </div>

          {isLoadingBuckets ? (
            <GenericSkeletonLoader />
          ) : (
            <Card>
              <Table>
                <TableHeader>
                  <TableRow>
                    {analyticsBuckets.length > 0 && (
                      <TableHead className="w-2 pr-1">
                        <span className="sr-only">Icon</span>
                      </TableHead>
                    )}