well deserved clean up (#1)

apps/dashboard/src/components/ui/dropdown-menu.tsx

@@ -180,6 +180,50 @@ const DropdownMenuShortcut = ({
 };
 DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
 
+interface DropdownProps<Value> {
+  children: React.ReactNode;
+  label?: string;
+  items: {
+    label: string;
+    value: Value;
+  }[];
+  onChange?: (value: Value) => void;
+}
+
+export function DropdownMenuComposed<Value extends string>({
+  children,
+  label,
+  items,
+  onChange,
+}: DropdownProps<Value>) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56" align="start">
+        {label && (
+          <>
+            <DropdownMenuLabel>{label}</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+          </>
+        )}
+        <DropdownMenuGroup>
+          {items.map((item) => (
+            <DropdownMenuItem
+              className="cursor-pointer"
+              key={item.value}
+              onClick={() => {
+                onChange?.(item.value);
+              }}
+            >
+              {item.label}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
 export {
   DropdownMenu,
   DropdownMenuTrigger,

apps/dashboard/src/components/ui/key-value.tsx

@@ -1,17 +1,16 @@
-import { isValidElement } from 'react';
 import { cn } from '@/utils/cn';
 import Link from 'next/link';
 
 interface KeyValueProps {
   name: string;
-  value: unknown;
+  value: any;
   onClick?: () => void;
   href?: string;
 }
 
 export function KeyValue({ href, onClick, name, value }: KeyValueProps) {
   const clickable = href || onClick;
-  const Component = href ? (Link as any) : onClick ? 'button' : 'div';
+  const Component = (href ? Link : onClick ? 'button' : 'div') as 'button';
 
   return (
     <Component
@@ -33,24 +32,3 @@ export function KeyValue({ href, onClick, name, value }: KeyValueProps) {
     </Component>
   );
 }
-
-export function KeyValueSubtle({ href, onClick, name, value }: KeyValueProps) {
-  const clickable = href || onClick;
-  const Component = href ? (Link as any) : onClick ? 'button' : 'div';
-  return (
-    <Component
-      className="group flex text-[10px] sm:text-xs gap-2 font-medium self-start min-w-0 max-w-full items-center"
-      {...{ href, onClick }}
-    >
-      <div className="text-gray-400">{name}</div>
-      <div
-        className={cn(
-          'bg-black/5 rounded p-0.5 px-1 sm:p-1 sm:px-2 text-gray-600 whitespace-nowrap text-ellipsis flex items-center gap-1',
-          clickable && 'group-hover:underline'
-        )}
-      >
-        {value}
-      </div>
-    </Component>
-  );
-}