Toggle group for pricing tier

<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="monthly" variant="outline" size="lg">
      <ToggleGroupItem value="monthly">Monthly</ToggleGroupItem>
      <ToggleGroupItem value="yearly" class="gap-2">
        Yearly
        <span class="bg-primary text-primary-foreground rounded-full px-2 py-0.5 text-xs font-medium">Save 20%</span>
      </ToggleGroupItem>
    </ToggleGroup>
  </div>
</template>