1 files changed, 32 insertions, 0 deletions
diff --git a/src/components/input/WebsiteFilterButton.tsx b/src/components/input/WebsiteFilterButton.tsx
new file mode 100644
index 0000000..7db850a
--- /dev/null
+++ b/src/components/input/WebsiteFilterButton.tsx
@@ -0,0 +1,32 @@
+import { useMessages, useNavigation } from '@/components/hooks';
+import { ListFilter } from '@/components/icons';
+import { DialogButton } from '@/components/input/DialogButton';
+import { FilterEditForm } from '@/components/input/FilterEditForm';
+import { filtersArrayToObject } from '@/lib/params';
+
+export function WebsiteFilterButton({
+  websiteId,
+}: {
+  websiteId: string;
+  position?: 'bottom' | 'top' | 'left' | 'right';
+  alignment?: 'end' | 'center' | 'start';
+}) {
+  const { formatMessage, labels } = useMessages();
+  const { updateParams, router } = useNavigation();
+
+  const handleChange = ({ filters, segment, cohort }: any) => {
+    const params = filtersArrayToObject(filters);
+
+    const url = updateParams({ ...params, segment, cohort });
+
+    router.push(url);
+  };
+
+  return (
+    <DialogButton icon={<ListFilter />} label={formatMessage(labels.filter)} variant="outline">
+      {({ close }) => {
+        return <FilterEditForm websiteId={websiteId} onChange={handleChange} onClose={close} />;
+      }}
+    </DialogButton>
+  );
+}