feat: add TimeRangeSection filter component

closes #75

dashboard/src/components/Filter/TimeRangeSection.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { IntlProvider } from 'react-intl';
+import { flatten } from 'flat';
+
+import { fn } from '@storybook/test';
+
+import { LOCALES } from '../../locales/constants';
+
+import { messages } from '../../locales/messages';
+
+import TimeRangeSection from './TimeRangeSection';
+
+const ActionsData = {
+  onMinChange: fn(),
+  onMaxChange: fn(),
+};
+
+const meta: Meta<typeof TimeRangeSection> = {
+  title: 'Filter TimeRangeSection',
+  component: TimeRangeSection,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: {
+    ...ActionsData,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { min: 0, max: 10 },
+  decorators: [
+    (story): JSX.Element => (
+      <IntlProvider
+        messages={flatten(messages[LOCALES.EN_US])}
+        locale={LOCALES.EN_US}
+      >
+        <div className="w-[500px]">{story()}</div>
+      </IntlProvider>
+    ),
+  ],
+};

dashboard/src/components/Filter/TimeRangeSection.tsx

@@ -0,0 +1,51 @@
+import { FormattedMessage } from 'react-intl';
+
+import { Input } from '../ui/input';
+
+interface TimeRangeSection {
+  min: number;
+  max: number;
+  onMinChange: (e: React.FormEvent<HTMLInputElement>) => void;
+  onMaxChange: (e: React.FormEvent<HTMLInputElement>) => void;
+}
+
+const inputContainerClass = 'flex gap-x-4 items-center';
+const inputClass = 'max-w-20';
+
+const TimeRangeSection = ({
+  min,
+  max,
+  onMinChange,
+  onMaxChange,
+}: TimeRangeSection): JSX.Element => {
+  return (
+    <div className="flex flex-col gap-y-2">
+      <div className={inputContainerClass}>
+        <span className="w-8">
+          <FormattedMessage id="filter.min" />:
+        </span>
+        <Input
+          className={inputClass}
+          onChange={onMinChange}
+          value={min}
+          type="number"
+        />
+      </div>
+
+      <div className={inputContainerClass}>
+        <span className="w-8">
+          <FormattedMessage id="filter.max" />:
+        </span>
+
+        <Input
+          className={inputClass}
+          onChange={onMaxChange}
+          value={max}
+          type="number"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default TimeRangeSection;

dashboard/src/locales/messages/index.ts

@@ -24,5 +24,9 @@ export const messages = {
       test: 'Test Status (Failed / Total)',
       tree: 'Tree',
     },
+    filter: {
+      min: 'Min',
+      max: 'Max',
+    },
   },
 };