initial: domains setup page (#2618)

Author: ArnavK-09

src/pages/package-settings.tsx

@@ -46,13 +46,16 @@ import {
   AlertTriangle,
   Trash2,
   ArrowRightLeft,
+  Search,
+  CheckCircle2,
 } from "lucide-react"
 import { cn } from "@/lib/utils"
 
-type SettingsSection = "general" | "github" | "danger"
+type SettingsSection = "general" | "domains" | "github" | "danger"
 
 const navItems: { id: SettingsSection; label: string }[] = [
   { id: "general", label: "General" },
+  { id: "domains", label: "Domains" },
   { id: "github", label: "GitHub" },
   { id: "danger", label: "Danger Zone" },
 ]
@@ -705,6 +708,90 @@ export default function PackageSettingsPage() {
               </>
             )}
 
+            {activeSection === "domains" && (
+              <div className="space-y-6">
+                <div className="flex flex-col sm:flex-row sm:items-start justify-between gap-4">
+                  <div>
+                    <h2 className="text-lg font-medium text-gray-900">
+                      Domains
+                    </h2>
+                    <p className="text-sm text-gray-500 mt-1">
+                      Domains can be assigned to pacakge release preview.
+                    </p>
+                  </div>
+                  <div className="flex gap-2 shrink-0">
+                    <Button
+                      variant="outline"
+                      className="bg-white"
+                      onClick={() =>
+                        toast({
+                          title: "Work in progress",
+                          description: "This feature is coming soon",
+                        })
+                      }
+                    >
+                      Add new subdomain
+                    </Button>
+                  </div>
+                </div>
+
+                <div className="border border-gray-200 rounded-lg bg-white overflow-hidden">
+                  <div className="p-3 border-b border-gray-200">
+                    <div className="relative">
+                      <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
+                      <Input
+                        placeholder="Search any domain"
+                        className="pl-9 border-none bg-transparent focus-visible:ring-0 placeholder:text-gray-400 focus:shadow-none shadow-none focus-visible:ring-offset-0"
+                      />
+                    </div>
+                  </div>
+                  <div className="divide-y divide-gray-200">
+                    {packageRelease?.package_release_website_url ? (
+                      [
+                        {
+                          name: packageRelease.package_release_website_url,
+                        },
+                      ].map((domain, i) => (
+                        <div
+                          key={i}
+                          className="p-4 flex flex-col sm:flex-row sm:items-center justify-between gap-4 hover:bg-gray-50/50 transition-colors"
+                        >
+                          <div className="flex items-start gap-3 min-w-0 flex-1">
+                            <CheckCircle2 className="h-5 w-5 text-white fill-blue-500 shrink-0 mt-0.5" />
+                            <div className="min-w-0 flex-1">
+                              <div className="font-medium text-gray-900 truncate">
+                                {domain.name}
+                              </div>
+                            </div>
+                          </div>
+
+                          <div className="flex items-center gap-2 ml-8 sm:ml-0">
+                            <Button
+                              variant="outline"
+                              size="sm"
+                              className="h-8 px-3 bg-white"
+                              onClick={() =>
+                                toast({
+                                  title: "Work in progress",
+                                  description: "Edit coming soon",
+                                })
+                              }
+                            >
+                              Edit
+                            </Button>
+                          </div>
+                        </div>
+                      ))
+                    ) : (
+                      <div className="p-8 text-center text-gray-500 text-sm">
+                        No domains configured yet
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            )}
+
             {activeSection === "github" && (
               <SettingCard
                 title="GitHub Repository"