Something went wrong. Try again.
A social knowledge tool for research trails, built on ATProto semble.so
research-tool social-network tools-for-thought atproto
Something went wrong. Try again.
1.2 kB · 50 lines
TSX
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051'use client';
import { ActionIcon, Tooltip } from '@mantine/core';import { useState } from 'react';import { BiRefresh } from 'react-icons/bi';import styles from './RefreshButton.module.css';
interface Props { onRefresh: () => void; isRefreshing?: boolean; /** Tooltip and accessible name. */ label: string; color?: string; size?: number | string;}
export default function RefreshButton(props: Props) { const [spins, setSpins] = useState(0);
return ( <Tooltip label={props.label}> <ActionIcon variant="light" color={props.color ?? 'blue'} radius="xl" size={props.size ?? 36} onClick={() => { setSpins((count) => count + 1); props.onRefresh(); }} aria-label={props.label} data-analytics-action="refresh" > <BiRefresh // Remounting replays the animation, so a refresh answered from cache // still moves. key={spins} size={20} className={ props.isRefreshing ? styles.busy : spins > 0 ? styles.spinning : undefined } /> </ActionIcon> </Tooltip> );}