add clipboard icon to search view

This commit is contained in:
hzrd149
2023-06-29 11:43:49 -05:00
parent dfb0523fdf
commit 4e59a0e586

View File

@@ -12,10 +12,10 @@ import {
useDisclosure, useDisclosure,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import dayjs from "dayjs"; import dayjs from "dayjs";
import { useEffect, useState } from "react"; import { useCallback, useEffect, useState } from "react";
import { useSearchParams, Link as RouterLink, useNavigate } from "react-router-dom"; import { useSearchParams, Link as RouterLink, useNavigate } from "react-router-dom";
import { useAsync } from "react-use"; import { useAsync } from "react-use";
import { LightningIcon, QrCodeIcon } from "../../components/icons"; import { ClipboardIcon, LightningIcon, QrCodeIcon } from "../../components/icons";
import { UserAvatarLink } from "../../components/user-avatar-link"; import { UserAvatarLink } from "../../components/user-avatar-link";
import { UserDnsIdentityIcon } from "../../components/user-dns-identity-icon"; import { UserDnsIdentityIcon } from "../../components/user-dns-identity-icon";
import ZapModal from "../../components/zap-modal"; import ZapModal from "../../components/zap-modal";
@@ -98,6 +98,10 @@ export default function SearchView() {
} }
}; };
const readClipboard = useCallback(async () => {
handleSearchText(await navigator.clipboard.readText());
}, []);
// set the search when the form is submitted // set the search when the form is submitted
const handleSubmit = (e: React.SyntheticEvent) => { const handleSubmit = (e: React.SyntheticEvent) => {
e.preventDefault(); e.preventDefault();
@@ -122,6 +126,9 @@ export default function SearchView() {
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<Flex gap="2"> <Flex gap="2">
<IconButton onClick={openScanner} icon={<QrCodeIcon />} aria-label="Qr Scanner" /> <IconButton onClick={openScanner} icon={<QrCodeIcon />} aria-label="Qr Scanner" />
{!!navigator.clipboard.readText && (
<IconButton onClick={readClipboard} icon={<ClipboardIcon />} aria-label="Read clipboard" />
)}
<Input type="search" value={search} onChange={(e) => setSearch(e.target.value)} /> <Input type="search" value={search} onChange={(e) => setSearch(e.target.value)} />
<Button type="submit" isLoading={loading}> <Button type="submit" isLoading={loading}>
Search Search