Denozordec
632adaa63f
Refactored the LookupAddStep, LookupMatchesGrid, LookupSearchForm, and LookupWizard components to eliminate Frame components, replacing them with simpler div structures for improved readability and maintainability. Updated comments to reflect the new layout and functionality, aligning with the wizard-2 design pattern.
60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
import { useState, type FormEvent } from 'react'
|
|
import { Search } from 'lucide-react'
|
|
|
|
import { Button } from '@evobgp/ui/components/button'
|
|
import { Field, FieldLabel } from '@evobgp/ui/components/field'
|
|
import {
|
|
InputGroup,
|
|
InputGroupAddon,
|
|
InputGroupInput,
|
|
} from '@evobgp/ui/components/input-group'
|
|
|
|
/**
|
|
* Lookup search fields — bare form for wizard-2 single-Frame surface.
|
|
* @see https://reui.io/preview/base/wizard-2
|
|
* @see https://reui.io/docs/components/base/frame
|
|
*/
|
|
export function LookupSearchForm({
|
|
initialQuery = '',
|
|
isPending = false,
|
|
onSubmit,
|
|
}: {
|
|
initialQuery?: string
|
|
isPending?: boolean
|
|
onSubmit: (q: string) => void
|
|
}) {
|
|
const [value, setValue] = useState(initialQuery)
|
|
|
|
function handleSubmit(e: FormEvent) {
|
|
e.preventDefault()
|
|
const q = value.trim()
|
|
if (!q) return
|
|
onSubmit(q)
|
|
}
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} className="flex flex-col gap-4 sm:flex-row sm:items-end">
|
|
<Field className="min-w-0 flex-1">
|
|
<FieldLabel htmlFor="lookup-q">IP, CIDR или домен</FieldLabel>
|
|
<InputGroup>
|
|
<InputGroupAddon align="inline-start">
|
|
<Search aria-hidden />
|
|
</InputGroupAddon>
|
|
<InputGroupInput
|
|
id="lookup-q"
|
|
name="q"
|
|
value={value}
|
|
onChange={(e) => setValue(e.target.value)}
|
|
placeholder="8.8.8.8, 203.0.113.0/24 или example.com"
|
|
autoComplete="off"
|
|
autoFocus
|
|
/>
|
|
</InputGroup>
|
|
</Field>
|
|
<Button type="submit" disabled={isPending || !value.trim()}>
|
|
Проверить
|
|
</Button>
|
|
</form>
|
|
)
|
|
}
|