Add service provider icon.

ui/src/components/certimate/AccessEdit.tsx

@@ -11,18 +11,11 @@ import { useState } from "react";
 import AccessTencentForm from "./AccessTencentForm";
 
 import { Label } from "../ui/label";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "../ui/select";
+
 import { Access, accessTypeMap } from "@/domain/access";
 import AccessAliyunForm from "./AccessAliyunForm";
 import { cn } from "@/lib/utils";
+import { RadioGroup, RadioGroupItem } from "../ui/radio-group";
 
 type TargetConfigEditProps = {
   op: "add" | "edit";
@@ -66,6 +59,10 @@ export function AccessEdit({
       break;
   }
 
+  const getOptionCls = (val: string) => {
+    return val == configType ? "border-primary" : "";
+  };
+
   return (
     <Dialog onOpenChange={setOpen} open={open}>
       <DialogTrigger asChild className={cn(className)}>
@@ -77,25 +74,28 @@ export function AccessEdit({
         </DialogHeader>
         <div className="container">
           <Label>服务商</Label>
-
-          <Select
-            onValueChange={(value) => {
-              setConfigType(value);
-            }}
+          <RadioGroup
             value={configType}
+            className="flex mt-3 space-x-2"
+            onValueChange={setConfigType}
           >
-            <SelectTrigger className="mt-3">
-              <SelectValue placeholder="选择服务商" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectGroup>
-                <SelectLabel>服务商</SelectLabel>
-                {typeKeys.map((key) => (
-                  <SelectItem value={key}>{accessTypeMap.get(key)}</SelectItem>
-                ))}
-              </SelectGroup>
-            </SelectContent>
-          </Select>
+            {typeKeys.map((key) => (
+              <div className="flex items-center space-x-2" key={key}>
+                <RadioGroupItem value={key} id={key} hidden />
+                <Label htmlFor={key}>
+                  <div
+                    className={cn(
+                      "flex items-center space-x-2 border p-2 rounded cursor-pointer",
+                      getOptionCls(key)
+                    )}
+                  >
+                    <img src={accessTypeMap.get(key)?.[1]} className="h-6" />
+                    <div>{accessTypeMap.get(key)?.[0]}</div>
+                  </div>
+                </Label>
+              </div>
+            ))}
+          </RadioGroup>
 
           {form}
         </div>

ui/src/components/ui/radio-group.tsx

@@ -0,0 +1,42 @@
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  )
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }