ben.carrasco/prowler
1
0
Fork 0
mirror of https://github.com/prowler-cloud/prowler.git synced 2026-04-02 08:21:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): add scrollbar

Browse Source
This commit is contained in:
pedrooot
2025-12-11 17:30:24 +01:00
parent 8e2ae3631d
commit bcf3fd3683
1 changed files with 66 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
ui/components/providers/radio-group-provider.tsx
View File

@@ -104,69 +104,73 @@ export const RadioGroupProvider: FC<RadioGroupProviderProps> = ({
name="providerType"
control={control}
render={({ field }) => (
<div className="flex flex-col gap-4">
<Input
aria-label="Search providers"
placeholder="Search providers..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
startContent={
<SearchIcon
className="text-bg-button-secondary shrink-0"
width={16}
/>
}
endContent={
searchTerm && (
<button
type="button"
aria-label="Clear search"
onClick={() => setSearchTerm("")}
className="text-bg-button-secondary shrink-0 focus:outline-none"
>
<XCircle className="h-4 w-4" />
</button>
)
}
classNames={{
base: "w-full",
input:
"text-bg-button-secondary placeholder:text-bg-button-secondary text-sm",
inputWrapper:
"!border-border-input-primary !bg-bg-input-primary dark:!bg-input/30 dark:hover:!bg-input/50 hover:!bg-bg-neutral-secondary !border !rounded-lg !shadow-xs !transition-[color,box-shadow] focus-within:!border-border-input-primary-press focus-within:!ring-1 focus-within:!ring-border-input-primary-press focus-within:!ring-offset-1 !h-10 !px-4 !py-3 !outline-none",
}}
/>
<div className="flex h-[calc(100vh-200px)] flex-col gap-2">
<div className="shrink-0">
<Input
aria-label="Search providers"
placeholder="Search providers..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
startContent={
<SearchIcon
className="text-bg-button-secondary shrink-0"
width={16}
/>
}
endContent={
searchTerm && (
<button
type="button"
aria-label="Clear search"
onClick={() => setSearchTerm("")}
className="text-bg-button-secondary shrink-0 focus:outline-none"
>
<XCircle className="h-4 w-4" />
</button>
)
}
classNames={{
base: "w-full",
input:
"text-bg-button-secondary placeholder:text-bg-button-secondary text-sm",
inputWrapper:
"!border-border-input-primary !bg-bg-input-primary dark:!bg-input/30 dark:hover:!bg-input/50 hover:!bg-bg-neutral-secondary !border !rounded-lg !shadow-xs !transition-[color,box-shadow] focus-within:!border-border-input-primary-press focus-within:!ring-1 focus-within:!ring-border-input-primary-press focus-within:!ring-offset-1 !h-10 !px-4 !py-3 !outline-none",
}}
/>
</div>
<RadioGroup
className="flex flex-wrap"
isInvalid={isInvalid}
{...field}
value={field.value || ""}
>
<div className="flex flex-col gap-4">
{filteredProviders.length > 0 ? (
filteredProviders.map((provider) => {
const BadgeComponent = provider.badge;
return (
<CustomRadio
key={provider.value}
description={provider.label}
value={provider.value}
>
<div className="flex items-center">
<BadgeComponent size={26} />
<span className="ml-2">{provider.label}</span>
</div>
</CustomRadio>
);
})
) : (
<p className="text-default-500 py-4 text-sm">
No providers found matching &quot;{searchTerm}&quot;
</p>
)}
</div>
</RadioGroup>
<div className="minimal-scrollbar flex-1 overflow-y-scroll pr-4">
<RadioGroup
className="flex flex-wrap"
isInvalid={isInvalid}
{...field}
value={field.value || ""}
>
<div className="flex flex-col gap-4">
{filteredProviders.length > 0 ? (
filteredProviders.map((provider) => {
const BadgeComponent = provider.badge;
return (
<CustomRadio
key={provider.value}
description={provider.label}
value={provider.value}
>
<div className="flex items-center">
<BadgeComponent size={26} />
<span className="ml-2">{provider.label}</span>
</div>
</CustomRadio>
);
})
) : (
<p className="text-default-500 py-4 text-sm">
No providers found matching &quot;{searchTerm}&quot;
</p>
)}
</div>
</RadioGroup>
</div>
{errorMessage && (
<FormMessage className="text-text-error">