react-icons/hi#HiCheck TypeScript Examples
The following examples show how to use
react-icons/hi#HiCheck.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Clippy.tsx From camunda-cockpit-plugins with Apache License 2.0 | 6 votes |
|
Clippy: React.FC<Props> = ({ value, children }) => {
const [mouseOver, setMouseOver] = useState(false);
const [copied, setCopied] = useState(false);
return (
<span
onMouseOver={() => {
if (!mouseOver) {
setMouseOver(true);
}
}}
onMouseLeave={() => {
setMouseOver(false);
setCopied(false);
}}
style={{ display: 'flex', alignItems: 'center' }}
>
{children}
{mouseOver ? (
<CopyToClipboard text={value} onCopy={() => setCopied(true)}>
<a
href="#"
onClick={e => {
e.preventDefault();
}}
style={{ fontSize: '120%', paddingLeft: '0.2em' }}
>
{copied ? (
<HiCheck style={{ color: 'green', display: 'flex' }} />
) : (
<HiClipboardCopy style={{ display: 'flex' }} />
)}
</a>
</CopyToClipboard>
) : (
<span style={{ fontSize: '120%', width: '1.2em' }} />
)}
</span>
);
}
Example #2
| Source File: select.tsx From website with Apache License 2.0 | 5 votes |
|
export function Select<T>(props: {
items: Array<Value<T>>;
selected: Value<T>;
setSelected: (value: Value<T>) => unknown;
}) {
const {selected, setSelected} = props;
return (
<div className="w-24">
<Listbox value={selected} onChange={setSelected}>
<div className="relative mt-1">
<Listbox.Button className="relative py-2 pr-10 pl-3 w-full text-left bg-black hover:bg-gray-800 rounded-lg focus-visible:border-indigo-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 shadow-md cursor-default sm:text-sm">
<span className="block truncate">{selected.name}</span>
<span className="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
<HiChevronDown
className="w-4 h-4 text-gray-400"
aria-hidden="true"
/>
</span>
</Listbox.Button>
<Transition
as={Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="overflow-auto absolute py-1 mt-1 w-full max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black/5 shadow-lg sm:text-sm">
{props.items.map(item => (
<Listbox.Option
key={item.name}
className={({active}) =>
`${active ? 'text-amber-900 bg-amber-100' : 'text-gray-900'}
cursor-default select-none relative py-2 pl-10 pr-4`
}
value={item}
>
{({selected, active}) => (
<>
<span
className={`${
selected ? 'font-medium' : 'font-normal'
} block truncate`}
>
{item.name}
</span>
{selected && (
<span
className={`${
active ? 'text-amber-600' : 'text-amber-600'
}
absolute inset-y-0 left-0 flex items-center pl-3`}
>
<HiCheck className="w-5 h-5" aria-hidden="true" />
</span>
)}
</>
)}
</Listbox.Option>
))}
</Listbox.Options>
</Transition>
</div>
</Listbox>
</div>
);
}
Example #3
| Source File: Item.tsx From ksana.in with Apache License 2.0 | 4 votes |
|
export function Item({ user, data }: IUrlItemProps) {
const { showAlert, hideAlert } = useAlertContext()
const [updateId, setUpdateId] = useState<string>('')
const [updateSlug, setUpdateSlug] = useState<string>('')
const [isSuccessCopy, setSuccessCopy] = useState<boolean>(false)
const [isLoadingShare, setLoadingShare] = useState<boolean>(false)
const [isLoadingSave, setLoadingSave] = useState<boolean>(false)
const isSupportShare: boolean =
typeof window !== 'undefined' ? navigator.share !== undefined : false
const bgBox = useColorModeValue('white', 'gray.800')
const bgInput = useColorModeValue('blackAlpha.100', 'whiteAlpha.100')
const showSuccessCopy = () => {
setSuccessCopy(true)
setTimeout(() => {
setSuccessCopy(false)
}, 2000)
}
const handleCopy = async (text: string) => {
if (navigator.clipboard) {
await navigator.clipboard.writeText(text)
} else {
copy(text)
}
showSuccessCopy()
}
const handleShare = async (url: string) => {
if (navigator.share) {
setLoadingShare(true)
const jsonRes = await getMeta(url)
const shareObj = {
title: jsonRes.title,
text: jsonRes.description,
url: url
}
navigator
.share(shareObj)
// eslint-disable-next-line no-console
.then(() => setLoadingShare(false))
.catch((error) => {
setLoadingShare(false)
// eslint-disable-next-line no-console
console.error('Error sharing', error, shareObj)
})
}
}
const handleClickEdit = async (id: string) => {
if (updateId === id) {
setUpdateId('')
setUpdateSlug('')
} else {
setUpdateId(id)
setUpdateSlug('')
}
}
const handleChangeUpdatedSlug = async (e: ChangeEvent<HTMLInputElement>) => {
const value = e.target.value
setUpdateSlug(value)
}
const handleClickSave = async () => {
if (updateSlug) {
setLoadingSave(true)
const { error } = await patchSlug({
id: updateId,
slug: sanitizeSlug(updateSlug),
userId: user?.id
})
if (error) {
showAlert({
title: 'Terjadi galat pada saat memperbarui data',
message: `Pesan: ${error.message}`,
onClose: () => {
hideAlert()
setLoadingSave(false)
}
})
} else {
mutate(apiUrlsGet(user?.id))
setUpdateId('')
setUpdateSlug('')
setLoadingSave(false)
}
}
}
const onConfimDelete = async (id: string) => {
const { error } = await deleteUrl({ id: id, userId: user?.id })
if (error) {
hideAlert()
showAlert({
title: 'Terjadi galat pada saat berusaha menghapus data',
message: `Pesan: ${error.message}`,
onClose: () => {
hideAlert()
}
})
}
hideAlert()
mutate(apiUrlsGet(user?.id))
}
const handleDelete = async (id: string, slug: string) => {
showAlert({
title: 'Konfirmasi hapus',
message: `Apakah kamu yakin untuk menghapus data ${HOME}${slug}? Aksi ini juga akan menghilangkan semua data statistik terkait.`,
cancelText: 'Batalkan',
confirmText: 'Ya, hapus',
onConfirm: () => {
onConfimDelete(id)
},
onClose: hideAlert
})
}
return (
<Box
key={data.slug}
w={'full'}
bg={bgBox}
boxShadow={'2xl'}
rounded={'md'}
overflow={'hidden'}
p={{ base: '4', md: '6' }}
>
{!!data.is_dynamic && (
<Tag size="sm" colorScheme="green">
Tautan dinamis
</Tag>
)}
<Flex alignItems="center" mb="4">
<Link
as="a"
fontSize={{ base: 'md', md: 'lg' }}
fontWeight="700"
color="orange.400"
href={`${HOME}${data.slug}${!!data.is_dynamic ? '/{param}' : ''}`}
display="block"
>
{`/${data.slug}`}
{!!data.is_dynamic && '/{param}'}
</Link>
</Flex>
{updateId && updateId === data.id && (
<HStack alignItems="center" mb="4" mt="2">
<Input
size="lg"
name="slug"
placeholder={'Tulis slug baru'}
bg={bgInput}
border={0}
value={updateSlug}
onChange={handleChangeUpdatedSlug}
/>
<IconButton
onClick={handleClickSave}
aria-label="Simpan slug"
size="lg"
bg="orange.400"
borderRadius="md"
isLoading={isLoadingSave}
icon={<HiSave color="#FFF" />}
/>
</HStack>
)}
<Text fontSize="small" color="gray.400" display="block" mb="2">
{data.real_url}
</Text>
<Text fontSize="small" color="gray.400">
<Text as="span" fontWeight="bold" color="orange.400">
{new Intl.NumberFormat('id-ID').format(data.hit)}
</Text>
{` `} kunjungan
</Text>
<HStack spacing={2} mt={4} flexWrap="wrap">
<IconButton
onClick={() => {
handleCopy(`${HOME}${data.slug}`)
}}
aria-label="Copy"
variant="ghost"
borderRadius="md"
icon={isSuccessCopy ? <HiCheck color="#48BB78" /> : <HiDuplicate color="#ED8936" />}
/>
{isSupportShare ? (
<IconButton
onClick={() => {
handleShare(`${HOME}${data.slug}`)
}}
aria-label="Copy"
variant="ghost"
borderRadius="md"
isLoading={isLoadingShare}
icon={<HiShare color="#ED8936" />}
/>
) : (
<SharePopover url={`${HOME}${data.slug}`} />
)}
<IconButton
onClick={() => {
handleClickEdit(data.id)
}}
aria-label="Ubah"
variant="ghost"
borderRadius="md"
icon={<HiPencil color="#ED8936" />}
/>
<IconButton
onClick={() => {
handleDelete(data.id, data.slug)
}}
aria-label="Hapus"
variant="ghost"
borderRadius="md"
icon={<HiTrash color="#ED8936" />}
/>
</HStack>
</Box>
)
}
Example #4
| Source File: ketentuan-layanan.tsx From ksana.in with Apache License 2.0 | 4 votes |
|
function Terms() {
const textColor = useColorModeValue('gray.500', 'gray.300')
return (
<Layout>
<MetaHead
title="Ketentuan Layanan | Ksana.in"
description="Persyaratan layanan yang merupakan perjanjian mengikat dan mengatur penggunaan Anda atas Ksana.in"
/>
<VStack spacing={4} textAlign="center" as="section" mt="32">
<VStack spacing={4} textAlign="center">
<Heading
as="h1"
fontWeight={700}
fontSize={{ base: '3xl', sm: '4xl', md: '5xl' }}
lineHeight={'110%'}
color="orange.400"
>
Ketentuan Layanan
</Heading>
<Image width={200} height={122} src={'/images/orange/ksana.svg'} alt="Ksana.in" />
</VStack>
<Container maxW={'4xl'} mx="auto" as="section">
<VStack spacing={8} textAlign="left">
<Text color={textColor}>
Terima kasih telah menggunakan{' '}
<Link href="/" color="orange.400">
{BRAND}
</Link>{' '}
. Persyaratan layanan ini merupakan perjanjian yang mengikat dan mengatur penggunaan
Anda atas{' '}
<Link href="/" color="orange.400">
{BRAND}
</Link>{' '}
dan akses ke situs web{' '}
<Link href="/" color="orange.400">
{BRAND}
</Link>{' '}
. Dengan menggunakan salah satu layanan{' '}
<Link href="/" color="orange.400">
{BRAND}
</Link>
, atau mengakses salah satu situs web kami, Anda setuju untuk terikat oleh persyaratan
layanan berikut.
</Text>
<Text color={textColor}>
Jika Anda memasuki perjanjian ini atas nama perusahaan atau badan hukum lainnya, Anda
menyatakan bahwa Anda memiliki kewenangan untuk mengikat entitas tersebut,
afiliasinya, semua pengguna yang mengakses layanan kami melalui akun Anda. Dalam kasus
tersebut, istilah "Anda" atau "milik Anda" merujuk pada perusahaan atau entitas hukum,
dan pengguna yang terkait dengannya. Jika Anda tidak memiliki kewenangan, jangan
setuju dengan syarat dan ketentuan ini atas nama perusahaan atau badan hukum lainnya.
</Text>
<Text color={textColor}>
Jika Anda tidak setuju dengan persyaratan layanan ini,{' '}
<Text as="span" fontWeight="bold">
jangan terima persyaratannya, dan jangan gunakan layanannya.
</Text>
</Text>
<Text color={textColor}>
Kami berhak memperbarui dan mengubah persyaratan layanan dari waktu ke waktu tanpa
pemberitahuan sebelumnya. Setiap fitur baru yang menambah atau meningkatkan layanan
saat ini, termasuk rilis alat dan sumber daya baru, harus tunduk pada persyaratan
layanan. Penggunaan berkelanjutan atas layanan setelah perubahan tersebut merupakan
persetujuan Anda untuk perubahan tersebut. Anda dapat meninjau versi terbaru dari
persyaratan layanan kapan saja di sini.
</Text>
<Text color={textColor}>
Pelanggaran salah satu persyaratan di bawah ini akan mengakibatkan penghentian akun
Anda. Meskipun kami melarang perilaku dan konten tertentu di layanan, Anda memahami
dan setuju bahwa kami tidak dapat bertanggung jawab atas konten yang diposting di
layanan dan Anda mungkin akan melihat materi tersebut. Anda setuju untuk menggunakan
layanan dengan risiko Anda sendiri.
</Text>
<Heading
as="h3"
fontWeight={700}
fontSize={{ base: 'lg', sm: 'xl', md: '2xl' }}
lineHeight={'110%'}
mt="8"
mb="2"
>
Ketentuan Privasi
</Heading>
<Text color={textColor}>
Kami menghormati privasi Anda. Pernyataan lengkap tentang kebijakan privasi kami dapat
ditemukan di{' '}
<Link href="/kebijakan-privasi" color="orange.400">
halaman kebijakan privasi
</Link>
. Kebijakan privasi kami secara tegas dimasukkan sebagai referensi ke dalam perjanjian
ini.
</Text>
<Heading
as="h3"
fontWeight={700}
fontSize={{ base: 'lg', sm: 'xl', md: '2xl' }}
lineHeight={'110%'}
mt="8"
mb="2"
>
Persyaratan Akun
</Heading>
<Text color={textColor}>Untuk menggunakan layanan ini, Anda harus:</Text>
<List spacing={3}>
<ListItem color={textColor}>
<ListIcon as={HiCheck} color="green.500" />
Berusia 11 tahun atau lebih dan jadilah manusia. Akun yang didaftarkan oleh "bot"
atau metode otomatis lainnya tidak diizinkan. berikan nama lengkap resmi Anda,
alamat email yang valid, dan informasi lainnya yang diminta untuk menyelesaikan
proses pendaftaran.
</ListItem>
<ListItem color={textColor}>
<ListIcon as={HiCheck} color="green.500" />
Anda bertanggung jawab untuk menjaga keamanan akun dan kata sandi Anda.
</ListItem>
<ListItem color={textColor}>
<ListIcon as={HiCheck} color="green.500" />
Kami tidak dapat dan tidak akan bertanggung jawab atas kehilangan atau kerusakan
akibat kegagalan Anda untuk mematuhi kewajiban keamanan ini. Login Anda hanya dapat
digunakan oleh satu orang - satu login yang digunakan bersama oleh banyak orang
tidak diizinkan. Anda dapat membuat login terpisah untuk sebanyak mungkin orang
sesuai rencana Anda.
</ListItem>
<ListItem color={textColor}>
<ListIcon as={HiCheck} color="green.500" />
Anda bertanggung jawab atas semua konten yang diposting dan aktivitas yang terjadi
di bawah akun Anda (bahkan ketika konten diposting oleh orang lain yang memiliki
akun di bawah akun Anda).
</ListItem>
<ListItem color={textColor}>
<ListIcon as={HiCheck} color="green.500" />
Anda tidak boleh menggunakan layanan untuk tujuan ilegal atau tidak sah. Anda tidak
boleh, dalam penggunaan layanan, melanggar hukum apa pun di yurisdiksi Anda
(termasuk namun tidak terbatas pada undang-undang hak cipta atau merek dagang)
</ListItem>
</List>
<Heading
as="h3"
fontWeight={700}
fontSize={{ base: 'lg', sm: 'xl', md: '2xl' }}
lineHeight={'110%'}
mt="8"
mb="2"
>
Hak Cipta dan Kepemilikan Konten
</Heading>
<List spacing={3}>
<ListItem color={textColor}>
<ListIcon as={HiCheck} color="green.500" />
Kami tidak mengklaim hak kekayaan intelektual atas materi yang Anda berikan ke
layanan. Profil dan materi yang Anda unggah tetap menjadi milik Anda. Namun, jika
Anda mengatur konten Anda untuk dilihat secara publik, Anda setuju untuk mengizinkan
orang lain untuk melihat konten Anda.
</ListItem>
<ListItem color={textColor}>
<ListIcon as={HiCheck} color="green.500" />
Kami tidak menyaring konten, tetapi kami memiliki hak (tetapi bukan kewajiban) atas
kebijakan kami sendiri untuk menolak atau menghapus konten apa pun yang tersedia
melalui layanan.
</ListItem>
</List>
<Text color={textColor} mt="8">
Pertanyaan tentang ketentuan layanan kami dapat ditujukan ke [email protected]
</Text>
<Text color={textColor} mt="8">
Terakhir diperbarui pada{' '}
<Text color="orange.400" as="span">
29 Mei 2021
</Text>
</Text>
</VStack>
</Container>
</VStack>
</Layout>
)
}
