calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-08-15 16:59:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

restyle domain picker

Browse Source
This commit is contained in:
miloschwartz
2026-08-14 17:53:53 -04:00
parent 53b1d8a9f3
commit ca7ea72ff1
1 changed files with 110 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/DomainPicker.tsx
+110 -124
View File
@@ -38,14 +38,11 @@ import { useQuery } from "@tanstack/react-query";
import { AxiosResponse } from "axios"; import { AxiosResponse } from "axios";
import { import {
AlertCircle, AlertCircle,
Building2, CheckIcon,
Check,
CheckCircle2,
ChevronsUpDown, ChevronsUpDown,
ExternalLink, ExternalLink,
Globe, Globe,
KeyRound, KeyRound
Zap
} from "lucide-react"; } from "lucide-react";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import Link from "next/link"; import Link from "next/link";
@@ -609,61 +606,72 @@ export default function DomainPicker({
<Popover open={open} onOpenChange={setOpen}> <Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<Button <Button
type="button"
variant="outline" variant="outline"
role="combobox" role="combobox"
aria-expanded={open} aria-expanded={open}
className="w-full justify-between" className={cn(
> "h-9 w-full justify-between font-normal",
{selectedBaseDomain ? ( !selectedBaseDomain &&
<div className="flex items-center gap-x-2 min-w-0 flex-1"> "text-muted-foreground"
{selectedBaseDomain.type ===
"organization" ? null : (
<Zap className="h-4 w-4 shrink-0" />
)}
<span className="truncate">
{selectedBaseDomain.domain}
</span>
{selectedBaseDomain.verified &&
selectedBaseDomain.domainType !==
"wildcard" && (
<CheckCircle2 className="h-3 w-3 text-green-500 shrink-0" />
)}
</div>
) : (
t("domainPickerSelectBaseDomain")
)} )}
>
<span className="truncate text-left">
{selectedBaseDomain
? selectedBaseDomain.domain
: t("domainPickerSelectBaseDomain")}
</span>
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" /> <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent className="w-[400px] p-0" align="start"> <PopoverContent
<Command className="rounded-lg"> className="w-[var(--radix-popover-trigger-width)] p-0"
align="start"
>
<Command>
<CommandInput <CommandInput
placeholder={t("domainPickerSearchDomains")} placeholder={t("domainPickerSearchDomains")}
className="border-0 focus:ring-0"
/> />
<CommandEmpty className="py-6 text-center"> <CommandList>
<div className="text-muted-foreground text-sm"> <CommandEmpty>
{t("domainPickerNoDomainsFound")} {t("domainPickerNoDomainsFound")}
</div> </CommandEmpty>
</CommandEmpty> {organizationDomains.length > 0 && (
{organizationDomains.length > 0 && (
<>
<CommandGroup <CommandGroup
heading={t( heading={t(
"domainPickerOrganizationDomains" "domainPickerOrganizationDomains"
)} )}
className="py-2"
> >
<CommandList> {organizationDomains.map(
{organizationDomains.map( (orgDomain) => {
(orgDomain) => ( const description =
orgDomain.type ===
"wildcard"
? t(
"domainPickerManual"
)
: `${orgDomain.type.toUpperCase()} · ${
orgDomain.verified
? t(
"domainPickerVerified"
)
: t(
"domainPickerUnverified"
)
}`;
const optionId = `org-${orgDomain.domainId}`;
return (
<CommandItem <CommandItem
key={`org-${orgDomain.domainId}`} key={optionId}
value={`${orgDomain.baseDomain} ${description}`}
disabled={
!orgDomain.verified
}
onSelect={() => onSelect={() =>
handleBaseDomainSelect( handleBaseDomainSelect(
{ {
id: `org-${orgDomain.domainId}`, id: optionId,
domain: orgDomain.baseDomain, domain: orgDomain.baseDomain,
type: "organization", type: "organization",
verified: verified:
@@ -675,80 +683,63 @@ export default function DomainPicker({
} }
) )
} }
className="mx-2 rounded-md"
disabled={
!orgDomain.verified
}
> >
<div className="flex items-center justify-center w-8 h-8 rounded-lg bg-muted mr-3"> <CheckIcon
<Building2 className="h-4 w-4 text-muted-foreground" />
</div>
<div className="flex flex-col flex-1 min-w-0">
<span className="font-medium truncate">
{
orgDomain.baseDomain
}
</span>
<span className="text-xs text-muted-foreground">
{orgDomain.type ===
"wildcard" ? (
t(
"domainPickerManual"
)
) : (
<>
{orgDomain.type.toUpperCase()}{" "}
•{" "}
{orgDomain.verified
? t(
"domainPickerVerified"
)
: t(
"domainPickerUnverified"
)}
</>
)}
</span>
</div>
<Check
className={cn( className={cn(
"h-4 w-4 text-primary", "mr-2 h-4 w-4 shrink-0",
selectedBaseDomain?.id === selectedBaseDomain?.id ===
`org-${orgDomain.domainId}` optionId
? "opacity-100" ? "opacity-100"
: "opacity-0" : "opacity-0"
)} )}
/> />
<div className="flex min-w-0 flex-1 flex-col gap-0.5">
<span className="truncate">
{
orgDomain.baseDomain
}
</span>
<span className="text-muted-foreground text-xs leading-snug">
{
description
}
</span>
</div>
</CommandItem> </CommandItem>
) );
)} }
</CommandList>
</CommandGroup>
{(build === "saas" ||
build === "enterprise") &&
!hideFreeDomain && (
<CommandSeparator className="my-2" />
)} )}
</> </CommandGroup>
)} )}
{organizationDomains.length > 0 &&
{(build === "saas" || build === "enterprise") && (build === "saas" ||
!hideFreeDomain && ( build === "enterprise") &&
<CommandGroup !hideFreeDomain && <CommandSeparator />}
heading={ {(build === "saas" ||
build === "enterprise" build === "enterprise") &&
? t( !hideFreeDomain && (
"domainPickerProvidedDomains" <CommandGroup
) heading={
: t( build === "enterprise"
"domainPickerFreeDomains" ? t(
) "domainPickerProvidedDomains"
} )
className="py-2" : t(
> "domainPickerFreeDomains"
<CommandList> )
}
>
<CommandItem <CommandItem
key="provided-search" value={`${
build === "enterprise"
? t(
"domainPickerProvidedDomain"
)
: t(
"domainPickerFreeProvidedDomain"
)
} ${t("domainPickerSearchForAvailableDomains")}`}
disabled={requiresPaywall}
onSelect={() => onSelect={() =>
handleBaseDomainSelect({ handleBaseDomainSelect({
id: "provided-search", id: "provided-search",
@@ -764,14 +755,18 @@ export default function DomainPicker({
type: "provided-search" type: "provided-search"
}) })
} }
className="mx-2 rounded-md"
disabled={requiresPaywall}
> >
<div className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 mr-3"> <CheckIcon
<Zap className="h-4 w-4 text-primary" /> className={cn(
</div> "mr-2 h-4 w-4 shrink-0",
<div className="flex flex-col flex-1 min-w-0"> selectedBaseDomain?.id ===
<span className="font-medium truncate"> "provided-search"
? "opacity-100"
: "opacity-0"
)}
/>
<div className="flex min-w-0 flex-1 flex-col gap-0.5">
<span className="truncate">
{build === {build ===
"enterprise" "enterprise"
? t( ? t(
@@ -781,25 +776,16 @@ export default function DomainPicker({
"domainPickerFreeProvidedDomain" "domainPickerFreeProvidedDomain"
)} )}
</span> </span>
<span className="text-xs text-muted-foreground"> <span className="text-muted-foreground text-xs leading-snug">
{t( {t(
"domainPickerSearchForAvailableDomains" "domainPickerSearchForAvailableDomains"
)} )}
</span> </span>
</div> </div>
<Check
className={cn(
"h-4 w-4 text-primary",
selectedBaseDomain?.id ===
"provided-search"
? "opacity-100"
: "opacity-0"
)}
/>
</CommandItem> </CommandItem>
</CommandList> </CommandGroup>
</CommandGroup> )}
)} </CommandList>
</Command> </Command>
</PopoverContent> </PopoverContent>
</Popover> </Popover>