wip: refresh design

apps/web/src/components/(dashboard)/period-selector/period-selector.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { useMemo } from 'react';
+
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+
+import { isPeriodSelectorValue } from './types';
+
+export const PeriodSelector = () => {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const router = useRouter();
+
+  const period = useMemo(() => {
+    const p = searchParams?.get('period') ?? '';
+
+    return isPeriodSelectorValue(p) ? p : '';
+  }, [searchParams]);
+
+  const onPeriodChange = (newPeriod: string) => {
+    if (!pathname) {
+      return;
+    }
+
+    const params = new URLSearchParams(searchParams?.toString());
+
+    params.set('period', newPeriod);
+
+    if (newPeriod === '') {
+      params.delete('period');
+    }
+
+    router.push(`${pathname}?${params.toString()}`);
+  };
+
+  return (
+    <Select defaultValue={period} onValueChange={onPeriodChange}>
+      <SelectTrigger className="max-w-[200px] text-slate-500">
+        <SelectValue />
+      </SelectTrigger>
+
+      <SelectContent position="popper">
+        <SelectItem value="">All Time</SelectItem>
+        <SelectItem value="7d">Last 7 days</SelectItem>
+        <SelectItem value="14d">Last 14 days</SelectItem>
+        <SelectItem value="30d">Last 30 days</SelectItem>
+      </SelectContent>
+    </Select>
+  );
+};

apps/web/src/components/(dashboard)/period-selector/types.ts

@@ -0,0 +1,5 @@
+export type PeriodSelectorValue = '' | '7d' | '14d' | '30d';
+
+export const isPeriodSelectorValue = (value: unknown): value is PeriodSelectorValue => {
+  return ['', '7d', '14d', '30d'].includes(value as string);
+};