First attemps at using route interception and modals

src/app/groups/[groupId]/@modal/expense-modal.tsx

@@ -0,0 +1,30 @@
+'use client'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { useRouter } from 'next/navigation'
+import { ReactNode } from 'react'
+
+export function ExpenseModal({
+  children,
+  title,
+}: {
+  children: ReactNode
+  title: ReactNode
+}) {
+  const router = useRouter()
+
+  return (
+    <Dialog open onOpenChange={() => router.back()}>
+      <DialogContent className="w-full max-w-screen-sm">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+        {children}
+      </DialogContent>
+    </Dialog>
+  )
+}