Skip to content
This repository was archived by the owner on May 13, 2025. It is now read-only.

Commit 200735e

Browse files
ameen4455Ameen Azeez
ameen4455
and
Ameen Azeez
authored
Query builder (#22)
Co-authored-by: Ameen Azeez <[email protected]>
1 parent e09aff2 commit 200735e

File tree

26 files changed

+5642
-3311
lines changed

26 files changed

+5642
-3311
lines changed

‎package-lock.json

Lines changed: 4906 additions & 3018 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,4 +59,4 @@
5959
"react-scripts": "5.0.1",
6060
"tailwindcss": "^3.1.3"
6161
}
62-
}
62+
}

‎src/assets/images/table-icon.svg

Lines changed: 3 additions & 0 deletions
Loading

‎src/components/Button/index.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from "react";
2+
import classNames from "classnames";
3+
4+
const Button = ({ children, disabled, onClick }) => {
5+
return (
6+
<button
7+
onClick={onClick}
8+
disabled={disabled}
9+
className={classNames(
10+
"py-2 leading-6 px-4 text-sm rounded-md disabled:opacity-75 bg-primary-200 text-gray-50"
11+
)}
12+
>
13+
{children}
14+
</button>
15+
);
16+
};
17+
18+
export default Button;

‎src/components/Checkbox/index.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@ import React from "react";
22

33
const Checkbox = ({ name, selected, onClick }) => {
44
return (
5-
<div className="mx-1 my-1 flex">
6-
<label className="px-5 w-full py-3 hover:bg-blue-50 rounded">
5+
<div className="mx-2 flex">
6+
<label className="px-5 w-full py-2 hover:bg-primary-400 rounded cursor-pointer">
77
<input
88
onChange={onClick}
99
type="checkbox"
1010
checked={selected}
11-
className="mb-1 h-5 w-5 mr-2 border-2 custom-focus border-gray-400 rounded-sm"
11+
className="mb-1 h-4 w-4 text-secondary-700 ring-0 outline-0 focus bg-primary-700 mr-2 rounded-sm"
1212
/>
13-
<span className="font-semibold">{name}</span>
13+
<span className="text-gray-200 text-sm">{name}</span>
1414
</label>
1515
</div>
1616
);

‎src/components/Dropdown/index.js

Lines changed: 29 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,34 +3,34 @@ import { Listbox } from "@headlessui/react";
33
import React from "react";
44
import { SelectorIcon } from "@heroicons/react/solid";
55

6-
const Dropdown = ({ name, disabled, value, setValue }) => {
6+
const Dropdown = ({ name, disabled, value, setValue, customStyle, Icon }) => {
77
const data = [
88
{
9-
name: "1 sec",
9+
name: "1s",
1010
value: 1,
1111
},
1212
{
13-
name: "2 sec",
13+
name: "2s",
1414
value: 2,
1515
},
1616
{
17-
name: "5 sec",
17+
name: "5s",
1818
value: 5,
1919
},
2020
{
21-
name: "10 sec",
21+
name: "10s",
2222
value: 10,
2323
},
2424
{
25-
name: "20 sec",
25+
name: "20s",
2626
value: 20,
2727
},
2828
{
29-
name: "1 min",
29+
name: "1m",
3030
value: 60,
3131
},
3232
{
33-
name: "None",
33+
name: "Off",
3434
value: null,
3535
},
3636
];
@@ -42,21 +42,33 @@ const Dropdown = ({ name, disabled, value, setValue }) => {
4242
</label>
4343
<Listbox
4444
as="div"
45-
value={value}
45+
value={disabled ? null : value}
4646
onChange={setValue}
47-
className="relative text-left ml-3 w-28"
47+
className="relative text-left"
4848
>
4949
<Listbox.Button
5050
disabled={disabled}
51-
className={"input flex disabled:text-gray-300 mt-1 text-left"}
51+
className={`${customStyle} input flex ${
52+
disabled && "text-gray-400"
53+
} mt-1 text-left`}
5254
>
5355
<div>
54-
{disabled ? "None" : data.find((obj) => obj.value === value).name}
56+
{disabled ? "Off" : data.find((obj) => obj.value === value).name}
5557
</div>
56-
<SelectorIcon
57-
className="h-5 w-5 text-gray-500 ml-auto"
58-
aria-hidden="true"
59-
/>
58+
{!Icon ? (
59+
<SelectorIcon
60+
className={`h-5 w-5 ${
61+
disabled ? "text-gray-300" : "text-gray-500"
62+
} ml-2`}
63+
aria-hidden="true"
64+
/>
65+
) : (
66+
<Icon
67+
className={`h-5 w-5 ${
68+
disabled ? "text-gray-300" : "text-gray-500"
69+
} ml-2`}
70+
/>
71+
)}
6072
</Listbox.Button>
6173
<Listbox.Options
6274
className={
@@ -71,7 +83,7 @@ const Dropdown = ({ name, disabled, value, setValue }) => {
7183
active={active}
7284
selected={selected}
7385
// onClick={() => setValue(obj.value)}
74-
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`}
86+
className={`block focus cursor-pointer hover:bg-bluePrimary hover:text-white text-sm font-semibold select-none py-2 px-4 text-gray-700`}
7587
/>
7688
)}
7789
</Listbox.Option>

‎src/components/Layout/Dialogue.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ const HelpDialog = ({ isOpen, setIsOpen }) => {
6464
style={{
6565
boxShadow: "0px 2px 10px 3px rgba(0, 0, 0, 0.075)",
6666
}}
67-
className="w-56 py-12 px-14 rounded-lg custom-focus"
67+
className="w-56 py-12 px-14 rounded-lg focus"
6868
>
6969
<img
7070
src={SlackIcon}
@@ -86,7 +86,7 @@ const HelpDialog = ({ isOpen, setIsOpen }) => {
8686
style={{
8787
boxShadow: "0px 2px 10px 3px rgba(0, 0, 0, 0.075)",
8888
}}
89-
className="w-56 py-12 px-14 rounded-lg custom-focus"
89+
className="w-56 py-12 px-14 rounded-lg focus"
9090
>
9191
<img
9292
src={GitHubIcon}
@@ -102,13 +102,13 @@ const HelpDialog = ({ isOpen, setIsOpen }) => {
102102
</a>
103103

104104
<a
105-
href="https://www.parseable.io/docs"
105+
href="https://www.parseable.io/docs/introduction"
106106
target="_blank"
107107
rel="noreferrer"
108108
style={{
109109
boxShadow: "0px 2px 10px 3px rgba(0, 0, 0, 0.075)",
110110
}}
111-
className="w-56 py-12 px-14 rounded-lg custom-focus"
111+
className="w-56 py-12 px-14 rounded-lg focus"
112112
>
113113
<img
114114
src={DocumentationIcon}

‎src/components/Layout/Navbar.js

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import React, { useState } from "react";
77

88
import Dialogue from "./Dialogue";
99
import Logo from "../../assets/images/Group 295.svg";
10-
import StreamIcon from "../../assets/images/Icon awesome-stream (1).svg";
1110
import UserIcon from "../../assets/images/Icon feather-user.svg";
1211
import { useNavigate } from "react-router-dom";
1312

@@ -19,7 +18,7 @@ const Navbar = ({ setSidebarOpen }) => {
1918
return (
2019
<>
2120
<Dialogue isOpen={isHelpDialogueOpen} setIsOpen={setIsHelpDialogueOpen} />
22-
<div className=" top-0 z-10 px-10 flex-shrink-0 flex h-16 bg-bluePrimary border-b-2 border-gray-500 shadow">
21+
<div className=" top-0 z-10 px-5 flex-shrink-0 flex h-16 bg-bluePrimary border-b-2 border-gray-500 shadow">
2322
<button
2423
type="button"
2524
className="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-bluePrimary md:hidden"
@@ -30,25 +29,21 @@ const Navbar = ({ setSidebarOpen }) => {
3029
<span className="sr-only">Open sidebar</span>
3130
<MenuAlt2Icon className="h-6 w-6" aria-hidden="true" />
3231
</button>
33-
<div className="flex-1 px-4 flex justify-between">
32+
<div className="flex-1 flex justify-between">
3433
<div className="flex-1 flex">
3534
<img alt="" className="w-32" src={Logo} />
3635
</div>
37-
<div className="ml-4 flex items-center md:ml-6">
38-
<button className="flex space-x-4 text-white font-medium h-full border-b-4 pl-7 pr-8 items-center justify-center border-white">
39-
<img alt="" src={StreamIcon} className="w-6" />
40-
<p>Streams</p>
41-
</button>
36+
<div className="ml-4 flex items-center md:ml-6">
4237
<button
4338
onClick={() => setIsHelpDialogueOpen(true)}
4439
className={
45-
"flex text-gray-400 py-5 px-7 text-sm border border-l-0 border-t-0 border-b-0 border-r-1 border-gray-400 custom-focus"
40+
"flex text-gray-400 py-5 text-sm focus"
4641
}
4742
>
48-
<QuestionMarkCircleIcon className="h-5 w-5 my-auto mr-2" />
49-
<span className={"block mb-1"}>Help</span>
43+
<QuestionMarkCircleIcon strokeWidth={1} className="h-5" />
44+
<span className={"block ml-1"}>Help</span>
5045
</button>
51-
<div className="flex mx-8">
46+
<div className="flex mr-8 ml-8">
5247
<img alt="" className="w-3" src={UserIcon} />
5348
<div className="ml-2 text-gray-400 text-sm">
5449
{localStorage.getItem("username")?.length > 0
@@ -58,7 +53,7 @@ const Navbar = ({ setSidebarOpen }) => {
5853
</div>
5954
<div>
6055
<LogoutIcon
61-
className="text-gray-400 w-5 ml-6"
56+
className="text-gray-400 w-5"
6257
onClick={() => {
6358
localStorage.removeItem("auth");
6459
navigate("/");

‎src/components/Layout/index.js

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,8 @@ export default function Layout({ children, labels }) {
1414
setSidebarOpen={setSidebarOpen}
1515
labels={labels}
1616
/>
17-
<div className="">
18-
<div className="flex flex-col flex-1">
19-
<main>
20-
<div className="">
21-
<div className="w-full">
22-
<div className="">{children}</div>
23-
</div>
24-
</div>
25-
</main>
26-
</div>
17+
<div className="flex">
18+
{children}
2719
</div>
2820
</>
2921
);

‎src/components/Pill/index.js

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
import React from "react";
22
import { XCircleIcon } from "@heroicons/react/solid";
33

4-
const Pill = ({ text, onClose }) => {
4+
const Pill = ({ text, onClose, equal }) => {
55
return (
6-
<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">
6+
<span className={`relative block w-min py-1 pl-2 ${ onClose ? `pr-6 ${equal && `flex-1`}` : "pr-2"} max-w-[11rem] truncate mr-1 bg-gray-300 text-xs text-gray-700 font-semibold leading-3 rounded-md`}>
77
{text}
8-
<XCircleIcon
9-
onClick={onClose}
10-
className="hover:text-gray-600 transform duration-200 text-red-700 w-4 absolute top-[0.125rem] right-1"
11-
/>
8+
{onClose && (
9+
<XCircleIcon
10+
onClick={onClose}
11+
className="hover:text-gray-500 cursor-pointer transform duration-200 text-gray-700 w-4 absolute top-[0.125rem] right-1"
12+
/>
13+
)}
1214
</span>
1315
);
1416
};

0 commit comments

Comments
 (0)