parseablehq · nitisht · Sep 12, 2022 · Sep 2, 2022 · Sep 2, 2022 · Sep 2, 2022
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,5 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
+.vscode
 # dependencies
 /node_modules
 /.pnp

diff --git a/public/index.html b/public/index.html
@@ -24,6 +24,8 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
     <title>Parseable Log Storage</title>
   </head>
   <body>

diff --git a/src/components/Dropdown/index.js b/src/components/Dropdown/index.js
@@ -0,0 +1,84 @@
+import { Listbox } from "@headlessui/react";
+import { SelectorIcon } from "@heroicons/react/solid";
+import Button from "../DropdownButton";
+
+const Dropdown = ({ name, disabled, value, setValue }) => {
+  const data = [
+    {
+      name: "1 sec",
+      value: 1,
+    },
+    {
+      name: "2 sec",
+      value: 2,
+    },
+    {
+      name: "5 sec",
+      value: 5,
+    },
+    {
+      name: "10 sec",
+      value: 10,
+    },
+    {
+      name: "20 sec",
+      value: 20,
+    },
+    {
+      name: "1 min",
+      value: 60,
+    },
+    {
+      name: "None",
+      value: null,
+    },
+  ];
+
+  return (
+    <div>
+      <label htmlFor="location" className="text-label ml-4">
+        {name}
+      </label>
+      <Listbox
+        as="div"
+        value={value}
+        onChange={setValue}
+        className="relative text-left ml-3 w-28"
+      >
+        <Listbox.Button
+          disabled={disabled}
+          className={"input flex disabled:text-gray-300 mt-1 text-left"}
+        >
+          <div>
+            {disabled ? "None" : data.find((obj) => obj.value === value).name}
+          </div>
+          <SelectorIcon
+            className="h-5 w-5 text-gray-500 ml-auto"
+            aria-hidden="true"
+          />
+        </Listbox.Button>
+        <Listbox.Options
+          className={
+            "absolute left-0 mt-2 py-2 w-40 origin-top-right rounded-md bg-gray-50 shadow-lg border border-1 border-gray-400"
+          }
+        >
+          {data.map((obj) => (
+            <Listbox.Option key={obj} value={obj.value}>
+              {({ active, selected }) => (
+                <Button
+                  text={obj.name}
+                  active={active}
+                  selected={selected}
+                  // onClick={() => setValue(obj.value)}
+                  className={`block custom-focus cursor-pointer hover:bg-bluePrimary hover:text-white text-sm font-semibold select-none py-2 px-4 text-gray-700`}
+                />
+              )}
+            </Listbox.Option>
+          ))}
+        </Listbox.Options>
+      </Listbox>
+    </div>
+  );
+};
+
+export default Dropdown;
diff --git a/src/components/DropdownButton/index.js b/src/components/DropdownButton/index.js
@@ -0,0 +1,21 @@
+import classNames from "classnames";
+import { CheckIcon } from "@heroicons/react/solid";
+
+const Button = ({ text, active, selected }) => {
+  return (
+    <li
+      className={classNames(
+        "hover:bg-primary-200 hover:cursor-pointer hover:text-gray-50 text-left px-3 py-2 mx-1 rounded-lg relative flex text-sm",
+        { "font-semibold": selected },
+        { "bg-primary-200 text-gray-50": active }
+      )}
+    >
+      {text}
+      {selected && (
+        <CheckIcon className="h-5 w-5 inline-block ml-auto my-auto" />
+      )}
+    </li>
+  );
+};
+
+export default Button;
diff --git a/src/components/MultiSelectDropdown/index.js b/src/components/MultiSelectDropdown/index.js
@@ -0,0 +1,54 @@
+import { Listbox } from "@headlessui/react";
+import { ChevronDownIcon } from "@heroicons/react/outline";
+import Button from "../DropdownButton";
+import Pill from "../Pill";
+
+const MultipleSelectDropdown = ({
+  name,
+  values,
+  setSelectedValues,
+  data,
+  removeValue,
+}) => (
+  <div className="ml-3 flex-1">
+    <label htmlFor="location" className="text-label">
+      {name}
+    </label>
+    <Listbox value={values} onChange={setSelectedValues} multiple>
+      <div className="relative w-full mt-1">
+        <Listbox.Button className="input flex text-left">
+          {values.length > 0
+            ? values.map((val) => (
+                <Pill text={val} onClose={() => removeValue(val)} />
+              ))
+            : "Select Tags"}
+          <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+            <ChevronDownIcon
+              className="h-5 w-5 text-gray-400"
+              aria-hidden="true"
+            />
+          </span>
+        </Listbox.Button>
+        <Listbox.Options
+          className={
+            "absolute left-0 mt-2 py-2 w-80 origin-top-right rounded-md bg-gray-50 shadow-lg border border-1 border-gray-400"
+          }
+        >
+          {data.length !== 0 ? (
+            data.map((value) => (
+              <Listbox.Option key={value} value={value}>
+                {({ active, selected }) => (
+                  <Button text={value} active={active} selected={selected} />
+                )}
+              </Listbox.Option>
+            ))
+          ) : (
+            <div className="px-3 py-2">Nothing Found</div>
+          )}
+        </Listbox.Options>
+      </div>
+    </Listbox>
+  </div>
+);
+
+export default MultipleSelectDropdown;
diff --git a/src/components/MultipleListBox/index.js b/src/components/MultipleListBox/index.js
diff --git a/src/components/Pill/index.js b/src/components/Pill/index.js
@@ -0,0 +1,15 @@
+import { XCircleIcon } from "@heroicons/react/solid";
+
+const Pill = ({ text, closable, onClose }) => {
+  return (
+    <span className="relative block w-min py-1 pl-2 pr-6 truncate mr-1 bg-secondary-200 text-xs text-gray-800 font-semibold leading-3 rounded-md">
+      {text}
+      <XCircleIcon
+        onClick={onClose}
+        className="hover:text-gray-600 transform duration-200 text-red-700 w-4 absolute top-[0.125rem] right-1"
+      />
+    </span>
+  );
+};
+
+export default Pill;
diff --git a/src/components/SearchableDropdown/index.js b/src/components/SearchableDropdown/index.js
@@ -0,0 +1,66 @@
+import { memo, useState } from "react";
+import { Combobox } from "@headlessui/react";
+import { SelectorIcon } from "@heroicons/react/solid";
+import DropdownButton from "../DropdownButton";
+
+const SearchableDropdown = ({ data, setValue, value, label }) => {
+  const [query, setQuery] = useState("");
+  // TODO: Throw error on no name
+  // TODO: Remove value from prop
+
+  const filteredData =
+    query === ""
+      ? data
+      : data.filter((obj) => {
+          return obj.name.toLowerCase().includes(query.toLowerCase());
+        });
+
+  return (
+    <div>
+      <label className="text-label ml-1" htmlFor="stream">
+        {label}
+      </label>
+      <Combobox value={value} onChange={setValue}>
+        <div className="relative mt-1">
+          <Combobox.Input
+            name="stream"
+            className={"input"}
+            onChange={(event) => setQuery(event.target.value)}
+            displayValue={(value) =>
+              data.length && value ? value.name : "No data found"
+            }
+          />
+          <Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
+            <SelectorIcon
+              className="h-5 w-5 text-gray-500"
+              aria-hidden="true"
+            />
+          </Combobox.Button>
+          <Combobox.Options
+            className={
+              "absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-gray-50 py-1 border border-1 border-gray-500"
+            }
+          >
+            {!!filteredData ? (
+              filteredData.map((data) => (
+                <Combobox.Option key={data.name} value={data}>
+                  {({ active, selected }) => (
+                    <DropdownButton
+                      text={data.name}
+                      active={active}
+                      selected={selected}
+                    />
+                  )}
+                </Combobox.Option>
+              ))
+            ) : (
+              <div>No data</div>
+            )}
+          </Combobox.Options>
+        </div>
+      </Combobox>
+    </div>
+  );
+};
+
+export default memo(SearchableDropdown);
diff --git a/src/index.css b/src/index.css
@@ -2,10 +2,28 @@
 @tailwind components;
 @tailwind utilities;
 
-.custom-focus{
- @apply focus:ring-yellowButton focus:border-yellowButton focus:ring-1 focus:outline-0;
+@layer components {
+  .focus {
+    @apply focus:ring-secondary-700 focus:border-secondary-700 focus:ring-1 focus:outline-0;
+  }
+
+  .text-input {
+    @apply text-gray-800 font-medium text-sm;
+  }
+
+  .text-label {
+    @apply text-xs font-medium text-gray-900;
+  }
+
+  .input {
+    @apply w-full rounded-lg py-2 px-3 border-2 bg-gray-50 border-gray-400 text-input focus;
+  }
+}
+
+.custom-focus {
+  @apply focus:ring-yellowButton focus:border-yellowButton focus:ring-1 focus:outline-0;
 }
 
 .custom-input {
   @apply w-full rounded py-2 px-3  border border-grey font-medium text-textBlack;
-}
+}
diff --git a/src/page/Dashboard/DatePicker.js b/src/page/Dashboard/DatePicker.js
@@ -8,8 +8,8 @@ const FORMAT = "DD-MM-YYYY HH:mm";
 
 const Calendar = ({ setStartDate, setEndDate, start, end }) => {
   const [dateRange, setDateRange] = useState([
-    moment(start).unix(),
-    moment(end).unix(),
+    moment(start).toDate(),
+    moment(end).toDate(),
   ]);
   const [startDate, endDate] = dateRange;
   const ExampleCustomInput = forwardRef(({ value, onClick }, ref) => (
@@ -20,6 +20,7 @@ const Calendar = ({ setStartDate, setEndDate, start, end }) => {
       />
     </button>
   ));
+  console.log({startDate,endDate})
   return (
     <DatePicker
       selectsRange={true}