split up some components

Author: mohnjiles

package.json

@@ -32,6 +32,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-resizable-panels": "^2.1.7",
+    "react-router-dom": "^7.1.3",
     "react-syntax-highlighter": "^15.6.1",
     "sonner": "^1.7.2",
     "tailwind-merge": "^2.6.0",

pnpm-lock.yaml

@@ -55,7 +55,7 @@ function App() {
     if (currentTab) {
       updateTab(currentTab.id, { params })
     }
-  })
+  }, currentTab?.params)
 
   // Update raw URL when params change without affecting user input
   useEffect(() => {

src/App.tsx

@@ -0,0 +1,93 @@
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Input } from "@/components/ui/input"
+import { AuthConfig, AuthType } from "@/types"
+
+interface AuthConfiguratorProps {
+  auth: AuthConfig
+  onAuthChange: (auth: AuthConfig) => void
+}
+
+const AUTH_TYPES = [
+  { value: 'none', label: 'No Auth' },
+  { value: 'basic', label: 'Basic Auth' },
+  { value: 'bearer', label: 'Bearer Token' },
+  { value: 'api-key', label: 'API Key' },
+]
+
+export function AuthConfigurator({ auth, onAuthChange }: AuthConfiguratorProps) {
+  return (
+    <div className="space-y-4">
+      <Select value={auth.type} onValueChange={(value: AuthType) => onAuthChange({ ...auth, type: value })}>
+        <SelectTrigger className="w-[200px] bg-background border-input focus:ring-0 focus-visible:ring-1">
+          <SelectValue placeholder="Authentication Type" />
+        </SelectTrigger>
+        <SelectContent className="bg-gray-800 border-border">
+          {AUTH_TYPES.map((type) => (
+            <SelectItem
+              key={type.value}
+              value={type.value}
+              className="hover:bg-muted focus:bg-muted text-white"
+            >
+              {type.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
+      {auth.type === 'basic' && (
+        <div className="space-y-2">
+          <Input
+            placeholder="Username"
+            value={auth.username || ''}
+            onChange={(e) => onAuthChange({ ...auth, username: e.target.value })}
+          />
+          <Input
+            type="password"
+            placeholder="Password"
+            value={auth.password || ''}
+            onChange={(e) => onAuthChange({ ...auth, password: e.target.value })}
+          />
+        </div>
+      )}
+
+      {auth.type === 'bearer' && (
+        <Input
+          placeholder="Bearer Token"
+          value={auth.token || ''}
+          onChange={(e) => onAuthChange({ ...auth, token: e.target.value })}
+        />
+      )}
+
+      {auth.type === 'api-key' && (
+        <div className="space-y-2">
+          <Input
+            placeholder="Key"
+            value={auth.key || ''}
+            onChange={(e) => onAuthChange({ ...auth, key: e.target.value })}
+          />
+          <Input
+            placeholder="Value"
+            value={auth.value || ''}
+            onChange={(e) => onAuthChange({ ...auth, value: e.target.value })}
+          />
+          <Select 
+            value={auth.addTo || 'header'} 
+            onValueChange={(value: 'header' | 'query') => onAuthChange({ ...auth, addTo: value })}
+          >
+            <SelectTrigger className="w-[200px] bg-background border-input focus:ring-0 focus-visible:ring-1">
+              <SelectValue placeholder="Add to" />
+            </SelectTrigger>
+            <SelectContent className="bg-gray-800 border-border">
+              <SelectItem value="header" className="hover:bg-muted focus:bg-muted text-white">
+                Header
+              </SelectItem>
+              <SelectItem value="query" className="hover:bg-muted focus:bg-muted text-white">
+                Query Parameter
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      )}
+    </div>
+  )
+} 

src/components/AuthConfigurator.tsx

@@ -0,0 +1,35 @@
+import { Button } from "@/components/ui/button"
+import { Copy, Check } from "lucide-react"
+import { useState } from "react"
+import { toast } from "sonner"
+
+interface CopyButtonProps {
+  content: string
+  className?: string
+}
+
+export function CopyButton({ content, className = "" }: CopyButtonProps) {
+  const [copied, setCopied] = useState(false)
+
+  const copy = async () => {
+    await navigator.clipboard.writeText(content)
+    setCopied(true)
+    toast.success("Copied to clipboard")
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <Button
+      variant="outline"
+      size="icon"
+      className={`h-8 w-8 ${className}`}
+      onClick={copy}
+    >
+      {copied ? (
+        <Check className="h-4 w-4" />
+      ) : (
+        <Copy className="h-4 w-4" />
+      )}
+    </Button>
+  )
+} 

src/components/CopyButton.tsx

@@ -0,0 +1,89 @@
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { Trash2, Plus } from "lucide-react"
+import React from "react"
+
+interface KeyValueListProps<T extends { key: string; value: string; enabled: boolean }> {
+  items: T[]
+  onItemsChange: (items: T[]) => void
+  keyPlaceholder?: string
+  valuePlaceholder?: string
+  disabled?: boolean
+}
+
+export function KeyValueList<T extends { key: string; value: string; enabled: boolean }>({
+  items,
+  onItemsChange,
+  keyPlaceholder = "Name",
+  valuePlaceholder = "Value",
+  disabled = false
+}: KeyValueListProps<T>) {
+  const updateItem = (index: number, field: keyof T, value: string | boolean) => {
+    const newItems = [...items]
+    newItems[index] = { ...newItems[index], [field]: value }
+    onItemsChange(newItems)
+  }
+
+  const removeItem = (index: number) => {
+    onItemsChange(items.filter((_, i) => i !== index))
+  }
+
+  const addItem = () => {
+    onItemsChange([...items, { key: "", value: "", enabled: true } as T])
+  }
+
+  return (
+    <div className="space-y-2">
+      <div className="grid grid-cols-[1fr,1fr,auto,auto] gap-2">
+        {items.map((item, index) => (
+          <React.Fragment key={index}>
+            <Input
+              placeholder={keyPlaceholder}
+              value={item.key}
+              onChange={(e) => updateItem(index, 'key', e.target.value)}
+              disabled={disabled}
+            />
+            <Input
+              placeholder={valuePlaceholder}
+              value={item.value}
+              onChange={(e) => updateItem(index, 'value', e.target.value)}
+              disabled={disabled}
+            />
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => updateItem(index, 'enabled', !item.enabled)}
+              className={item.enabled ? "text-foreground" : "text-muted-foreground"}
+              disabled={disabled}
+            >
+              <input
+                type="checkbox"
+                checked={item.enabled}
+                className="h-4 w-4"
+                onChange={() => {}} // Handled by button click
+              />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => removeItem(index)}
+              disabled={disabled}
+            >
+              <Trash2 className="h-4 w-4" />
+            </Button>
+          </React.Fragment>
+        ))}
+      </div>
+      <Button
+        variant="outline"
+        size="sm"
+        className="w-full"
+        onClick={addItem}
+        disabled={disabled}
+      >
+        <Plus className="h-4 w-4 mr-2" />
+        Add Item
+      </Button>
+    </div>
+  )
+}