Esteves Enzo commited on
Commit
d2a6779
1 Parent(s): 76ea2b9

update ui style + responsive

Browse files
components/editor/header.tsx CHANGED
@@ -1,14 +1,24 @@
1
- import HFLogo from "assets/hf-logo.svg";
2
  import Image from "next/image";
 
 
 
3
 
4
- export const EditorHeader = () => {
 
 
 
 
5
  return (
6
- <header className="px-6 py-2.5 border border-slate-950 bg-slate-950 flex justify-between items-center">
 
 
 
7
  <Image src={HFLogo} alt="Hugging Face Logo" width={34} height={34} />
8
  <p className="text-gray-300 font-code text-sm font-semibold">
9
- Hugging Face Client REST API
 
10
  </p>
11
- <div className="flex items-center justify-end gap-3">
12
  <div className="bg-teal-600 w-3 h-3 rounded-full" />
13
  <div className="bg-indigo-600 w-3 h-3 rounded-full" />
14
  <div className="bg-purple-500 w-3 h-3 rounded-full" />
 
 
1
  import Image from "next/image";
2
+ import { TbMenu2 } from "react-icons/tb";
3
+
4
+ import HFLogo from "assets/hf-logo.svg";
5
 
6
+ export const EditorHeader = ({
7
+ onToggleMenu,
8
+ }: {
9
+ onToggleMenu: () => void;
10
+ }) => {
11
  return (
12
+ <header className="px-4 xl:px-6 py-2.5 border border-slate-950 bg-slate-950 flex justify-between items-center">
13
+ <div className="w-5 h-5 block xl:hidden" onClick={onToggleMenu}>
14
+ <TbMenu2 className="w-full h-full text-slate-100" />
15
+ </div>
16
  <Image src={HFLogo} alt="Hugging Face Logo" width={34} height={34} />
17
  <p className="text-gray-300 font-code text-sm font-semibold">
18
+ <span className="hidden xl:inline-block">Hugging Face</span> Client REST
19
+ API
20
  </p>
21
+ <div className="hidden xl:flex items-center justify-end gap-3">
22
  <div className="bg-teal-600 w-3 h-3 rounded-full" />
23
  <div className="bg-indigo-600 w-3 h-3 rounded-full" />
24
  <div className="bg-purple-500 w-3 h-3 rounded-full" />
components/editor/index.tsx CHANGED
@@ -7,6 +7,7 @@ import { EditorSidebar } from "./sidebar";
7
  import { usePathname } from "next/navigation";
8
 
9
  export const Editor = ({ children }: any) => {
 
10
  const [collections, setCollections] = useState<string[]>([]);
11
  const pathname = usePathname();
12
 
@@ -18,9 +19,10 @@ export const Editor = ({ children }: any) => {
18
 
19
  return (
20
  <div className="bg-slate-950 w-full overflow-hidden shadow-xl h-[100vh]">
21
- <EditorHeader />
22
  <main className="flex h-full">
23
  <EditorSidebar
 
24
  collections={collections}
25
  onCollections={setCollections}
26
  />
 
7
  import { usePathname } from "next/navigation";
8
 
9
  export const Editor = ({ children }: any) => {
10
+ const [open, setOpen] = useState<boolean>(false);
11
  const [collections, setCollections] = useState<string[]>([]);
12
  const pathname = usePathname();
13
 
 
19
 
20
  return (
21
  <div className="bg-slate-950 w-full overflow-hidden shadow-xl h-[100vh]">
22
+ <EditorHeader onToggleMenu={() => setOpen(!open)} />
23
  <main className="flex h-full">
24
  <EditorSidebar
25
+ open={open}
26
  collections={collections}
27
  onCollections={setCollections}
28
  />
components/editor/main/index.tsx CHANGED
@@ -34,7 +34,7 @@ export const EditorMain = ({ endpoint }: { endpoint: ApiRoute }) => {
34
 
35
  return (
36
  <div className="flex-1 bg-slate-900/50 h-[calc(100%-56px)]">
37
- <div className="h-full grid grid-cols-2">
38
  <Request
39
  parameters={formattedParameters}
40
  onChange={(k: string, v: string | boolean) => {
 
34
 
35
  return (
36
  <div className="flex-1 bg-slate-900/50 h-[calc(100%-56px)]">
37
+ <div className="h-full grid grid-cols-1 xl:grid-cols-3">
38
  <Request
39
  parameters={formattedParameters}
40
  onChange={(k: string, v: string | boolean) => {
components/editor/main/request.tsx CHANGED
@@ -19,7 +19,7 @@ export const Request = ({
19
  console.log(headers);
20
 
21
  return (
22
- <div className="h-full bg-slate-900 p-5">
23
  {children}
24
  {parameters && (
25
  <div className="mt-6 grid grid-cols-2 gap-6 w-full">
 
19
  console.log(headers);
20
 
21
  return (
22
+ <div className="h-full bg-slate-900 px-4 xl:px-6 py-5">
23
  {children}
24
  {parameters && (
25
  <div className="mt-6 grid grid-cols-2 gap-6 w-full">
components/editor/main/response.tsx CHANGED
@@ -3,7 +3,7 @@ import "node_modules/highlight.js/styles/night-owl.css";
3
  import { Loading } from "@/components/loading";
4
  export const Response = ({ res, loading }: { res: any; loading: boolean }) => {
5
  return (
6
- <div className="overflow-auto h-full relative">
7
  <Highlight className="json text-sm !bg-slate-950/10 !h-full !p-3 !font-code !whitespace-pre-wrap">
8
  {JSON.stringify(res ?? {}, null, 2)}
9
  </Highlight>
 
3
  import { Loading } from "@/components/loading";
4
  export const Response = ({ res, loading }: { res: any; loading: boolean }) => {
5
  return (
6
+ <div className="overflow-auto h-full relative xl:col-span-2">
7
  <Highlight className="json text-sm !bg-slate-950/10 !h-full !p-3 !font-code !whitespace-pre-wrap">
8
  {JSON.stringify(res ?? {}, null, 2)}
9
  </Highlight>
components/editor/sidebar.tsx CHANGED
@@ -1,18 +1,19 @@
1
  "use client";
2
  import { TbChevronDown } from "react-icons/tb";
 
 
3
  import classNames from "classnames";
4
 
5
  import { API_COLLECTIONS } from "@/utils/datas/api_collections";
6
  import { Method } from "@/components/method";
7
- import { ApiRoute } from "@/utils/type";
8
- import Link from "next/link";
9
- import { usePathname, useRouter } from "next/navigation";
10
 
11
  export const EditorSidebar = ({
12
  collections,
 
13
  onCollections,
14
  }: {
15
  collections: string[];
 
16
  onCollections: (collections: string[]) => void;
17
  }) => {
18
  const pathname = usePathname();
@@ -25,7 +26,14 @@ export const EditorSidebar = ({
25
  }
26
  };
27
  return (
28
- <ul className="min-w-[300px] max-w-sm w-full bg-slate-900 border-r border-slate-700/40 h-full overflow-auto">
 
 
 
 
 
 
 
29
  {API_COLLECTIONS.map((collection, c) => (
30
  <li key={collection.key} className="block w-full">
31
  <div
 
1
  "use client";
2
  import { TbChevronDown } from "react-icons/tb";
3
+ import Link from "next/link";
4
+ import { usePathname } from "next/navigation";
5
  import classNames from "classnames";
6
 
7
  import { API_COLLECTIONS } from "@/utils/datas/api_collections";
8
  import { Method } from "@/components/method";
 
 
 
9
 
10
  export const EditorSidebar = ({
11
  collections,
12
+ open,
13
  onCollections,
14
  }: {
15
  collections: string[];
16
+ open: boolean;
17
  onCollections: (collections: string[]) => void;
18
  }) => {
19
  const pathname = usePathname();
 
26
  }
27
  };
28
  return (
29
+ <ul
30
+ className={classNames(
31
+ "min-w-[300px] transition-all duration-200 xl:max-w-sm w-2/3 xl:w-full bg-slate-900 border-r border-slate-700/40 xl:!h-full overflow-auto fixed top-[56px] xl:top-0 left-0 xl:relative z-10 -translate-x-full xl:!translate-x-0",
32
+ {
33
+ "translate-x-0 h-[calc(100%-56px)]": open,
34
+ }
35
+ )}
36
+ >
37
  {API_COLLECTIONS.map((collection, c) => (
38
  <li key={collection.key} className="block w-full">
39
  <div
components/input/toggle.tsx CHANGED
@@ -23,7 +23,7 @@ export const Toggle: React.FC<Props> = ({ label, onChange, checked }) => {
23
  "w-[52px] h-[24px] rounded-full p-[4px] relative cursor-pointer",
24
  {
25
  "bg-red-700": !checkedState,
26
- "bg-blue-600": checkedState,
27
  }
28
  )}
29
  onClick={() => setCheckedState(!checkedState)}
@@ -32,21 +32,11 @@ export const Toggle: React.FC<Props> = ({ label, onChange, checked }) => {
32
  className={classNames(
33
  "rounded-full h-[16px] w-[16px] bg-slate-50 shadow-xl absolute top-[4px] transition-all duration-200",
34
  {
35
- "left-[4px]": checkedState,
36
- "left-[31px]": !checkedState,
37
  }
38
  )}
39
  />
40
- <p
41
- className={classNames(
42
- "text-white text-xs uppercase font-bold transition-all duration-200",
43
- {
44
- "text-right": checkedState,
45
- }
46
- )}
47
- >
48
- {checkedState ? "on" : "off"}
49
- </p>
50
  </div>
51
  </div>
52
  );
 
23
  "w-[52px] h-[24px] rounded-full p-[4px] relative cursor-pointer",
24
  {
25
  "bg-red-700": !checkedState,
26
+ "bg-green-500": checkedState,
27
  }
28
  )}
29
  onClick={() => setCheckedState(!checkedState)}
 
32
  className={classNames(
33
  "rounded-full h-[16px] w-[16px] bg-slate-50 shadow-xl absolute top-[4px] transition-all duration-200",
34
  {
35
+ "left-[4px]": !checkedState,
36
+ "left-[31px]": checkedState,
37
  }
38
  )}
39
  />
 
 
 
 
 
 
 
 
 
 
40
  </div>
41
  </div>
42
  );