style

Author: ademilter

packages/react-databrowser/src/components/databrowser/components/add-key-modal.tsx

@@ -23,7 +23,7 @@ import {
 } from "@/components/ui/select"
 import { Spinner } from "@/components/ui/spinner"
 import { toast } from "@/components/ui/use-toast"
-import { RedisTypeTag } from "@/components/databrowser/components/type-tag"
+import { TypeTag } from "@/components/databrowser/components/type-tag"
 import { useAddKey } from "@/components/databrowser/hooks/use-add-key"
 
 export function AddKeyModal() {
@@ -63,33 +63,31 @@ export function AddKeyModal() {
       }}
     >
       <DialogTrigger asChild>
-        <Button
-          variant="outline"
-          size="icon-sm"
-          className="border-none bg-[#13B981] hover:bg-[#13B981]/90"
-        >
-          <PlusIcon className="h-4 w-4 text-white" />
+        <Button variant="primary" size="icon-sm">
+          <PlusIcon className="h-4 w-4" />
         </Button>
       </DialogTrigger>
-      <DialogContent className="sm:max-w-[550px]">
+
+      <DialogContent className="max-w-[400px]">
         <DialogHeader>
           <DialogTitle>Create new key</DialogTitle>
         </DialogHeader>
+
         <form className="mt-4" onSubmit={onSubmit}>
           <div className="flex gap-1">
             <Controller
               control={control}
               name="type"
               render={({ field }) => (
                 <Select value={field.value} onValueChange={field.onChange}>
-                  <SelectTrigger className="h-8 w-auto pl-[3px] pr-10">
+                  <SelectTrigger className="h-8 w-auto pl-[3px] pr-8">
                     <SelectValue />
                   </SelectTrigger>
                   <SelectContent>
                     <SelectGroup>
                       {DATA_TYPES.map((type) => (
                         <SelectItem key={type} value={type}>
-                          <RedisTypeTag type={type as DataType} />
+                          <TypeTag variant={type} type="badge" />
                         </SelectItem>
                       ))}
                     </SelectGroup>
@@ -108,12 +106,15 @@ export function AddKeyModal() {
               )}
             />
           </div>
+
           {formState.errors.key && (
-            <div className="mb-3 mt-1 text-xs text-red-500">{formState.errors.key?.message}</div>
+            <p className="mb-3 mt-2 text-xs text-red-500">{formState.errors.key?.message}</p>
           )}
-          <div className="mt-1 text-xs text-zinc-500">
+
+          <p className="mt-2 text-xs text-zinc-500">
             After creating the key, you can edit the value
-          </div>
+          </p>
+
           <div className="mt-6 flex justify-end gap-2">
             <Button
               type="button"

packages/react-databrowser/src/components/databrowser/components/display/display-header.tsx

@@ -13,7 +13,7 @@ import { FETCH_TTL_QUERY_KEY, useFetchTTL } from "../../hooks"
 import { useDeleteKeyCache } from "../../hooks/use-delete-key-cache"
 import { useFetchKeyLength } from "../../hooks/use-fetch-key-length"
 import { useFetchKeySize } from "../../hooks/use-fetch-key-size"
-import { RedisTypeTag } from "../type-tag"
+import { TypeTag } from "../type-tag"
 import { KeyActions } from "./key-actions"
 import { TTLPopover } from "./ttl-popover"
 
@@ -62,7 +62,7 @@ export const DisplayHeader = ({
       </div>
       {!hideBadges && (
         <div className="flex flex-wrap gap-1">
-          <RedisTypeTag type={type} isIcon={false} />
+          <TypeTag variant={type} type="badge" />
           <SizeBadge dataKey={dataKey} />
           <LengthBadge dataKey={dataKey} type={type} content={content} />
           {length && <Badge label="Length:">{size}</Badge>}

packages/react-databrowser/src/components/databrowser/components/sidebar/index.tsx

@@ -17,31 +17,32 @@ export function Sidebar() {
 
   return (
     <div className="flex h-full flex-col gap-2 rounded-xl border p-1">
-      {/* start -> Header */}
       <div className="rounded-lg bg-zinc-100 px-3 py-2">
-        {/* Header top */}
-        <div className="flex h-10 items-center justify-between">
+        {/* Meta */}
+        <div className="flex h-10 items-center justify-between pl-1">
           <DisplayDbSize />
           <div className="flex gap-1">
             <AddKeyModal />
           </div>
         </div>
 
-        {/* Header bottom */}
-        <div className="flex h-10">
+        {/* Filter */}
+        <div className="flex h-10 items-center">
+          {/* Types */}
           <DataTypeSelector />
+
+          {/* Search */}
           <Input
             type="text"
             placeholder="Search"
             className={
-              "block rounded-l-none border-zinc-300 px-2 font-normal placeholder-zinc-300 focus-visible:ring-0"
+              "rounded-l-none border-zinc-300 px-2 font-normal placeholder-zinc-300 focus-visible:ring-0"
             }
             onChange={(e) => setSearchKey(e.target.value)}
             value={search.key}
           />
         </div>
       </div>
-      {/* finish -> Header */}
 
       {query.isLoading ? (
         <LoadingSkeleton />

packages/react-databrowser/src/components/databrowser/components/sidebar/infinite-scroll.tsx

@@ -23,6 +23,8 @@ export const InfiniteScroll = ({
   return (
     <ScrollArea className="block h-full w-full transition-all" onScroll={handleScroll}>
       {children}
+
+      {/* scroll trigger */}
       <div className="flex h-[100px] justify-center py-2 text-zinc-300">
         {query.isFetching && <IconLoader2 className="animate-spin" size={16} />}
       </div>

packages/react-databrowser/src/components/databrowser/components/sidebar/keys-list.tsx

@@ -2,7 +2,7 @@ import { useDatabrowserStore } from "@/store"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
-import { RedisTypeTag } from "@/components/databrowser/components/type-tag"
+import { TypeTag } from "@/components/databrowser/components/type-tag"
 import type { RedisKey } from "@/components/databrowser/hooks"
 
 import { useKeys } from "../../hooks/use-keys"
@@ -28,17 +28,18 @@ const KeyItem = ({ data }: { data: RedisKey }) => {
   return (
     <Button
       key={dataKey}
+      variant={isKeySelected ? "default" : "ghost"}
       className={cn(
-        "flex w-full items-center justify-start gap-2 border text-left",
-        isKeySelected
-          ? "border-emerald-400 bg-emerald-50 shadow-sm hover:bg-emerald-100/60"
-          : "border-transparent"
+        "relative flex h-10 w-full items-center justify-start gap-3 px-3 py-0 ",
+        "border border-transparent text-left",
+        isKeySelected && "border-zinc-500 !bg-zinc-100 shadow-sm"
       )}
-      variant={isKeySelected ? "default" : "ghost"}
       onClick={() => setSelectedKey(dataKey)}
     >
-      <RedisTypeTag type={dataType} isIcon />
+      <TypeTag variant={dataType} type="icon" />
       <p className="truncate whitespace-nowrap text-black">{dataKey}</p>
+
+      {!isKeySelected && <span className="absolute -bottom-px left-3 right-3 h-px bg-zinc-100" />}
     </Button>
   )
 }

packages/react-databrowser/src/components/databrowser/components/sidebar/skeleton-buttons.tsx

@@ -1,14 +1,15 @@
 import { Skeleton } from "@/components/ui/skeleton"
 
-const DEFAULT_SKELETON_COUNT = 10
+const DEFAULT_SKELETON_COUNT = 6
+
 export const LoadingSkeleton = () => (
-  <div className="flex flex-col pr-1">
+  <div className="grid">
     {Array.from({ length: DEFAULT_SKELETON_COUNT })
       .fill(0)
       .map((_, idx) => (
-        <div className="flex h-[40px] items-center rounded-md bg-zinc-100 pl-4 pr-8" key={idx}>
-          <Skeleton className="mr-2 h-[20px] w-[20px] rounded" />
-          <Skeleton className="h-[20px] w-full rounded" />
+        <div className="flex h-10 items-center gap-3 px-3" key={idx}>
+          <Skeleton className="size-5 shrink-0 rounded" />
+          <Skeleton className="h-4 grow rounded" />
         </div>
       ))}
   </div>

packages/react-databrowser/src/components/databrowser/components/type-tag.tsx

@@ -1,3 +1,4 @@
+import * as React from "react"
 import { DATA_TYPE_NAMES, type DataType } from "@/types"
 import {
   IconArrowsSort,
@@ -7,43 +8,50 @@ import {
   IconList,
   IconQuote,
 } from "@tabler/icons-react"
-import colors from "tailwindcss/colors"
+import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
 
-const colorsMap = {
-  string: colors.sky,
-  set: colors.indigo,
-  hash: colors.amber,
-  json: colors.purple,
-  zset: colors.pink,
-  list: colors.orange,
-  stream: colors.orange,
-} as const
-
 const iconsMap = {
-  string: <IconQuote size={16} />,
-  set: <IconLayersIntersect size={16} />,
-  hash: <IconHash size={16} />,
-  json: <IconCodeDots size={16} />,
-  zset: <IconArrowsSort size={16} />,
-  list: <IconList size={16} />,
-  stream: <IconList size={16} />,
+  string: <IconQuote size={16} stroke={1.5} />,
+  set: <IconLayersIntersect size={16} stroke={1.5} />,
+  hash: <IconHash size={16} stroke={1.5} />,
+  json: <IconCodeDots size={16} stroke={1.5} />,
+  zset: <IconArrowsSort size={16} stroke={1.5} />,
+  list: <IconList size={16} stroke={1.5} />,
+  stream: <IconList size={16} stroke={1.5} />,
 } as const
 
-export function RedisTypeTag({ type, isIcon }: { type: DataType; isIcon?: boolean }) {
+const tagVariants = cva("inline-flex shrink-0 items-center rounded-md justify-center", {
+  variants: {
+    variant: {
+      string: "bg-sky-200 text-sky-800",
+      list: "bg-orange-200 text-orange-800",
+      hash: "bg-amber-200 text-amber-800",
+      set: "bg-indigo-200 text-indigo-800",
+      zset: "bg-pink-200 text-pink-800",
+      json: "bg-purple-200 text-purple-800",
+      stream: "bg-orange-200 text-orange-800",
+    },
+    type: {
+      icon: "size-5",
+      badge: "h-6 px-2 uppercase whitespace-nowrap text-xs font-medium leading-none tracking-wide",
+    },
+  },
+  defaultVariants: {
+    variant: "string",
+    type: "icon",
+  },
+})
+
+export interface TypeTagProps
+  extends React.ComponentProps<"span">,
+    VariantProps<typeof tagVariants> {}
+
+export function TypeTag({ className, variant, type }: TypeTagProps) {
   return (
-    <div
-      className={cn(
-        "inline-flex shrink-0 items-center justify-center whitespace-nowrap rounded-md text-xs font-medium leading-none tracking-wide",
-        isIcon ? "h-5 w-5" : "h-6 px-1 uppercase"
-      )}
-      style={{
-        backgroundColor: colorsMap[type][200],
-        color: colorsMap[type][800],
-      }}
-    >
-      {isIcon ? iconsMap[type] : DATA_TYPE_NAMES[type]}
-    </div>
+    <span className={cn(tagVariants({ variant, type, className }))}>
+      {type === "icon" ? iconsMap[variant as DataType] : DATA_TYPE_NAMES[variant as DataType]}
+    </span>
   )
 }

packages/react-databrowser/src/components/ui/dialog.tsx

@@ -19,7 +19,9 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-white/80 backdrop-blur-sm dark:bg-neutral-950/80",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm",
       className
     )}
     {...props}
@@ -36,7 +38,15 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-neutral-200 bg-white p-6 shadow-lg duration-200 sm:rounded-lg md:w-full dark:border-neutral-800 dark:bg-neutral-950",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out ",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 ",
+        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 ",
+        "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
+        "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg ",
+        "translate-x-[-50%] translate-y-[-50%] gap-4",
+        "bg-white p-6 shadow-lg duration-200 ",
+        "sm:rounded-lg md:w-full",
         className
       )}
       {...props}

packages/react-databrowser/src/playground.tsx

@@ -3,7 +3,7 @@ import ReactDOM from "react-dom/client"
 import { Databrowser } from "@/components/databrowser"
 
 ReactDOM.createRoot(document.querySelector("#root")!).render(
-  <main className="h-screen max-h-full rounded-xl bg-white">
+  <main className="h-screen max-h-full rounded-xl bg-white antialiased">
     <Databrowser
       token={process.env.NEXT_PUBLIC_UPSTASH_REDIS_REST_TOKEN}
       url={process.env.NEXT_PUBLIC_UPSTASH_REDIS_REST_URL}

packages/react-databrowser/tailwind.config.js

@@ -1,4 +1,5 @@
 const defaultTheme = require("tailwindcss/defaultTheme")
+const colors = require("tailwindcss/colors")
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {