Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
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
|
|
|
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-
|
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
|
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
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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-
|
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]":
|
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 |
);
|