Toggle group for time range filter

<script setup lang="ts">
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
</script>

<template>
  <div class="flex items-center justify-center">
    <ToggleGroup type="single" default-value="24h" variant="outline" size="sm">
      <ToggleGroupItem value="1h">1H</ToggleGroupItem>
      <ToggleGroupItem value="6h">6H</ToggleGroupItem>
      <ToggleGroupItem value="24h">24H</ToggleGroupItem>
      <ToggleGroupItem value="7d">7D</ToggleGroupItem>
      <ToggleGroupItem value="30d">30D</ToggleGroupItem>
      <ToggleGroupItem value="all">All</ToggleGroupItem>
    </ToggleGroup>
  </div>
</template>