RefreshButton

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<div className="flex flex-col gap-6">
  <div>
    <h4 className="text-sm font-medium mb-2">
      Basic Refresh Button
    </h4>
    <div className="flex items-center gap-4">
      <RefreshButton
        isEnabled
        onRefresh={i}
      />
      <span className="text-sm text-gray-600">
        Refresh count: 0
      </span>
    </div>
  </div>
  <div>
    <h4 className="text-sm font-medium mb-2">
      With Custom Styling
    </h4>
    <div className="flex items-center gap-4">
      <RefreshButton
        isEnabled
        onRefresh={i}
      />
      <span className="text-xs text-gray-500">
        Try clicking or pressing ⌥+⇧+R
      </span>
    </div>
  </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<div className="flex flex-col gap-6">
  <div>
    <h4 className="text-sm font-medium mb-2">
      With Live Mode Integration
    </h4>
    <div className="flex items-center gap-4">
      <RefreshButton
        isEnabled
        isLive
        onRefresh={onRefresh}
        toggleLive={bound nn}
      />
      <div className="flex flex-col gap-1">
        <span className="text-sm text-gray-600">
          Refresh count: 0
        </span>
        <span className="text-sm text-gray-600">
          Live data: 1752239159965
        </span>
        <span className="text-xs text-gray-500">
          Live mode: ON
        </span>
      </div>
    </div>
  </div>
  <div>
    <h4 className="text-sm font-medium mb-2">
      Live Mode Toggle
    </h4>
    <div className="flex items-center gap-4">
      <Button
        className="px-3 py-1 text-sm border rounded hover:bg-gray-50"
        onClick={onClick}
        variant="outline"
      >
        Toggle Live Mode
      </Button>
      <span className="text-xs text-gray-500">
        Live mode will be temporarily disabled during refresh
      </span>
    </div>
  </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

<div className="flex flex-col gap-6">
  <div>
    <h4 className="text-sm font-medium mb-2">
      Conditional Enablement
    </h4>
    <div className="flex items-center gap-4">
      <select
        className="px-3 py-1 text-sm border rounded"
        onChange={onChange}
        value="1h"
      >
        <option value="1h">
          Last 1 hour
        </option>
        <option value="24h">
          Last 24 hours
        </option>
        <option value="7d">
          Last 7 days
        </option>
        <option value="all">
          All time
        </option>
      </select>
      <RefreshButton
        isEnabled
        onRefresh={d}
      />
      <span className="text-sm text-gray-600">
        Refresh count: 0
      </span>
    </div>
  </div>
  <div>
    <h4 className="text-sm font-medium mb-2">
      Disabled State
    </h4>
    <div className="flex items-center gap-4">
      <RefreshButton
        onRefresh={d}
      />
      <span className="text-xs text-gray-500">
        Hover over the disabled button to see the tooltip
      </span>
    </div>
  </div>
  <div>
    <h4 className="text-sm font-medium mb-2">
      State Comparison
    </h4>
    <div className="flex items-center gap-4">
      <div className="flex flex-col gap-2">
        <span className="text-xs font-medium">
          Enabled:
        </span>
        <RefreshButton
          isEnabled
          onRefresh={d}
        />
      </div>
      <div className="flex flex-col gap-2">
        <span className="text-xs font-medium">
          Disabled:
        </span>
        <RefreshButton
          onRefresh={d}
        />
      </div>
    </div>
  </div>
</div>