82 lines
2.2 KiB
TypeScript
82 lines
2.2 KiB
TypeScript
"use client";
|
||
|
||
import { Input } from "@/components/ui/input";
|
||
import {
|
||
InputGroup,
|
||
InputGroupButton,
|
||
InputGroupText,
|
||
} from "@/components/ui/input-group";
|
||
import { Icon } from "@iconify/react";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Label } from "@/components/ui/label";
|
||
|
||
const MergedInputGroup = () => {
|
||
return (
|
||
<>
|
||
<InputGroup merged>
|
||
<InputGroupText className="border-default-200">
|
||
<Icon icon="heroicons:magnifying-glass" />
|
||
</InputGroupText>
|
||
<Input type="text" placeholder="Search.." />
|
||
</InputGroup>
|
||
<InputGroup merged>
|
||
<Input type="text" placeholder="Search" />
|
||
<InputGroupText className="border-default-200">
|
||
<Icon icon="heroicons:magnifying-glass" />
|
||
</InputGroupText>
|
||
</InputGroup>
|
||
<InputGroup merged>
|
||
<InputGroupButton>
|
||
<Button
|
||
disabled
|
||
variant="outline"
|
||
size="md"
|
||
className="border-default-200 border-r-0"
|
||
>
|
||
<Icon icon="heroicons:at-symbol" />
|
||
</Button>
|
||
</InputGroupButton>
|
||
<Input
|
||
disabled
|
||
type="text"
|
||
placeholder="Search.."
|
||
className="border-l-0"
|
||
/>
|
||
</InputGroup>
|
||
<InputGroup merged>
|
||
<InputGroupText>
|
||
<Icon icon="heroicons:at-symbol" />
|
||
</InputGroupText>
|
||
<Input readOnly type="text" placeholder="Search.." />
|
||
</InputGroup>
|
||
<div>
|
||
<Label className="mb-3" htmlFor="username2">
|
||
Password
|
||
</Label>
|
||
<InputGroup>
|
||
<Input
|
||
type="password"
|
||
placeholder="Password"
|
||
id="username2"
|
||
required
|
||
/>
|
||
</InputGroup>
|
||
</div>
|
||
<InputGroup merged>
|
||
<Input type="text" placeholder="Recient’s username" />
|
||
<InputGroupText className=" text-sm font-normal ">
|
||
@example.com
|
||
</InputGroupText>
|
||
</InputGroup>
|
||
<InputGroup merged>
|
||
<InputGroupText className=" text-sm font-normal">
|
||
https://example.com/users/
|
||
</InputGroupText>
|
||
<Input type="text" placeholder="Recient’s username" />
|
||
</InputGroup>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default MergedInputGroup;
|