Separator with centered text label

<script setup lang="ts">
import { Separator } from "@/components/ui/separator"
</script>

<template>
  <div class="mx-auto flex w-full max-w-xs flex-col gap-6">
    <div class="relative">
      <Separator />
      <span
        class="bg-background text-muted-foreground absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 px-2 text-xs"
      >
        or continue with
      </span>
    </div>
  </div>
</template>