77 lines
2.0 KiB
TypeScript
77 lines
2.0 KiB
TypeScript
"use client";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Input } from "@/components/ui/input";
|
||
import {
|
||
InputGroup,
|
||
InputGroupButton,
|
||
InputGroupText,
|
||
} from "@/components/ui/input-group";
|
||
import { Label } from "@/components/ui/label";
|
||
import { Icon } from "@iconify/react";
|
||
|
||
const BasicInputGroup = () => {
|
||
return (
|
||
<>
|
||
<InputGroup>
|
||
<InputGroupText>
|
||
<Icon icon="heroicons:at-symbol" />
|
||
</InputGroupText>
|
||
<Input type="text" placeholder="Search.." />
|
||
</InputGroup>
|
||
<InputGroup>
|
||
<Input type="text" placeholder="Search.." />
|
||
<InputGroupText>
|
||
<Icon icon="heroicons:at-symbol" />
|
||
</InputGroupText>
|
||
</InputGroup>
|
||
<InputGroup>
|
||
<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>
|
||
<InputGroupText>
|
||
<Icon icon="heroicons:at-symbol" />
|
||
</InputGroupText>
|
||
<Input readOnly type="text" placeholder="Search.." />
|
||
</InputGroup>
|
||
<div>
|
||
<Label className="mb-3" htmlFor="username5">
|
||
Password
|
||
</Label>
|
||
<InputGroup>
|
||
<Input
|
||
type="password"
|
||
placeholder="Password"
|
||
id="username5"
|
||
required
|
||
/>
|
||
</InputGroup>
|
||
</div>
|
||
<InputGroup>
|
||
<Input type="text" placeholder="Recipent’s username" />
|
||
<InputGroupText>@example.com</InputGroupText>
|
||
</InputGroup>
|
||
<InputGroup>
|
||
<InputGroupText>https://example.com/users/</InputGroupText>
|
||
<Input type="text" placeholder="Recipent’s username" />
|
||
</InputGroup>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default BasicInputGroup;
|