Merge branch 'develop' of http://85.143.176.51:3000/free-land/front-end into feature/checkbox
This commit is contained in:
“Salar
parent
a0605f1567
commit
bdb87d715a
33
src/App.tsx
33
src/App.tsx
@ -2,6 +2,9 @@
|
||||
/* Libraries */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
import React from "react";
|
||||
import classNames from "classnames";
|
||||
import Inputgroup from "components/Inputgroup";
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* Application root component */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
@ -10,7 +13,37 @@ import React from "react";
|
||||
* @return {JSX.Element}
|
||||
*/
|
||||
function App() {
|
||||
<<<<<<< Updated upstream
|
||||
return <div>Hello world!</div>;
|
||||
=======
|
||||
return (
|
||||
<div>
|
||||
<Inputgroup className="bg-red-500 pt-4">
|
||||
<select className="w-1/4 h-9 bg-white text-base">
|
||||
<option>Apps</option>
|
||||
</select>
|
||||
|
||||
<input
|
||||
className={classNames(
|
||||
"flex grow shrink basis-auto m-1 p-1 text-base hover:placeholder:text-slate-300 hover:duration-1200 "
|
||||
)}
|
||||
placeholder="Search.."
|
||||
type="text"
|
||||
/>
|
||||
<Inputgroup>
|
||||
{" "}
|
||||
<input
|
||||
className={classNames(
|
||||
"flex grow shrink basis-auto m-1 p-1 text-base hover:placeholder:text-slate-300 hover:duration-1200 "
|
||||
)}
|
||||
placeholder="Search.."
|
||||
type="text"
|
||||
/>
|
||||
</Inputgroup>
|
||||
</Inputgroup>
|
||||
</div>
|
||||
);
|
||||
>>>>>>> Stashed changes
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
BIN
src/assets/12.jpeg
Normal file
BIN
src/assets/12.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 169 KiB |
BIN
src/assets/13.jpeg
Normal file
BIN
src/assets/13.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
BIN
src/assets/14.jpg
Normal file
BIN
src/assets/14.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 224 KiB |
BIN
src/assets/16.jpg
Normal file
BIN
src/assets/16.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 528 KiB |
BIN
src/assets/20.png
Normal file
BIN
src/assets/20.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 KiB |
58
src/components/Bell.tsx
Normal file
58
src/components/Bell.tsx
Normal file
@ -0,0 +1,58 @@
|
||||
import React from "react";
|
||||
import classNames from "classnames";
|
||||
export type Props = {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
const Bell = ({ className }: Props) => {
|
||||
return (
|
||||
<div className={classNames("", className)}>
|
||||
<svg
|
||||
// width="24"
|
||||
// height="25"
|
||||
viewBox="0 0 24 25"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clip-path="url(#clip0_531_23239)">
|
||||
<path
|
||||
d="M18 8.5C18 6.9087 17.3679 5.38258 16.2426 4.25736C15.1174 3.13214 13.5913 2.5 12 2.5C10.4087 2.5 8.88258 3.13214 7.75736 4.25736C6.63214 5.38258 6 6.9087 6 8.5C6 15.5 3 17.5 3 17.5H21C21 17.5 18 15.5 18 8.5Z"
|
||||
stroke="#262626"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M13.73 21.5C13.5542 21.8031 13.3018 22.0547 12.9982 22.2295C12.6946 22.4044 12.3504 22.4965 12 22.4965C11.6496 22.4965 11.3054 22.4044 11.0018 22.2295C10.6981 22.0547 10.4458 21.8031 10.27 21.5"
|
||||
stroke="#262626"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<rect
|
||||
x="13"
|
||||
y="1.5"
|
||||
width="10"
|
||||
height="10"
|
||||
rx="5"
|
||||
fill="#FF4D4F"
|
||||
stroke="white"
|
||||
stroke-width="2"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_531_23239">
|
||||
<rect
|
||||
width="24"
|
||||
height="24"
|
||||
fill="white"
|
||||
transform="translate(0 0.5)"
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Bell;
|
||||
40
src/components/Burger.tsx
Normal file
40
src/components/Burger.tsx
Normal file
@ -0,0 +1,40 @@
|
||||
import React from "react";
|
||||
import classNames from "classnames";
|
||||
export type Props = {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
const Burger = ({ className }: Props) => {
|
||||
return (
|
||||
<div className={classNames("", className)}>
|
||||
<svg
|
||||
// width="24"
|
||||
// height="25"
|
||||
viewBox="0 0 24 25"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M3 6.5L21 6.5"
|
||||
stroke="#262626"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M3 12.5L21 12.5"
|
||||
stroke="#262626"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M3 18.5L21 18.5"
|
||||
stroke="#262626"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Burger;
|
||||
98
src/components/Drop.tsx
Normal file
98
src/components/Drop.tsx
Normal file
@ -0,0 +1,98 @@
|
||||
import React, { Fragment } from "react";
|
||||
import classNames from "classnames";
|
||||
import { Menu, Transition } from "@headlessui/react";
|
||||
|
||||
import Burger from "./Burger";
|
||||
|
||||
const Drop = () => {
|
||||
return (
|
||||
<div>
|
||||
<Menu as="div" className="relative inline-block text-left">
|
||||
<div>
|
||||
<Menu.Button
|
||||
className="inline-flex justify-center w-full rounded-md border
|
||||
border-gray-300 shadow-sm px-1 py-1 bg-white text-sm font-medium
|
||||
text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2
|
||||
focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-black"
|
||||
>
|
||||
About
|
||||
</Menu.Button>
|
||||
</div>
|
||||
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items
|
||||
className="origin-top-right absolute right-0 mt-5 w-56 rounded-md
|
||||
shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
>
|
||||
<div className="py-1">
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<a
|
||||
href="#"
|
||||
className={classNames(
|
||||
active ? "bg-gray-100 text-gray-900" : "text-gray-700",
|
||||
"block px-4 py-2 text-sm"
|
||||
)}
|
||||
>
|
||||
About Freeland
|
||||
</a>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<a
|
||||
href="#"
|
||||
className={classNames(
|
||||
active ? "bg-gray-100 text-gray-900" : "text-gray-700",
|
||||
"block px-4 py-2 text-sm"
|
||||
)}
|
||||
>
|
||||
Contact Us
|
||||
</a>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<a
|
||||
href="#"
|
||||
className={classNames(
|
||||
active ? "bg-gray-100 text-gray-900" : "text-gray-700",
|
||||
"block px-4 py-2 text-sm"
|
||||
)}
|
||||
>
|
||||
Help
|
||||
</a>
|
||||
)}
|
||||
</Menu.Item>
|
||||
{/* <form method="POST" action="#">
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<button
|
||||
type="submit"
|
||||
className={classNames(
|
||||
active ? "bg-gray-100 text-gray-900" : "text-gray-700",
|
||||
"block w-full text-left px-4 py-2 text-sm"
|
||||
)}
|
||||
>
|
||||
Sign out
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</form> */}
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Drop;
|
||||
64
src/components/Dropdown.tsx
Normal file
64
src/components/Dropdown.tsx
Normal file
@ -0,0 +1,64 @@
|
||||
import React, { useRef } from "react";
|
||||
import { useState } from "react";
|
||||
import classNames from "classnames";
|
||||
|
||||
export type Props = {
|
||||
className?: string;
|
||||
selected?: string;
|
||||
setSelected: (option: string) => void;
|
||||
options: string[];
|
||||
};
|
||||
|
||||
const Dropdown = ({ selected, setSelected, options, className }: Props) => {
|
||||
const [isActive, setIsActive] = useState<boolean>(false);
|
||||
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
const handleClickOutsideDropdown = (e: any) => {
|
||||
if (isActive && !dropdownRef.current?.contains(e.target as Node)) {
|
||||
setIsActive(false);
|
||||
}
|
||||
};
|
||||
window.addEventListener("click", handleClickOutsideDropdown);
|
||||
|
||||
return (
|
||||
<div className={classNames("", className)} ref={dropdownRef}>
|
||||
<div
|
||||
className="group border-gray-200 hover:border-gray-500 p-2
|
||||
select-none rounded
|
||||
flex items-center justify-between"
|
||||
onClick={(e) => setIsActive(!isActive)}
|
||||
>
|
||||
{selected}
|
||||
<span
|
||||
className="border-r-4 border-l-4 border-t-4 border-b-4 border-r-transparent
|
||||
border-l-transparent border-t-black border-b-transparent h-0 w-0 mt-1
|
||||
transition-all duration-300
|
||||
|
||||
"
|
||||
></span>
|
||||
</div>
|
||||
{isActive && (
|
||||
<div
|
||||
className="float-left mt-1 border border-gray-200 hover:border-gray-500
|
||||
rounded"
|
||||
>
|
||||
{options.map((option) => (
|
||||
<div
|
||||
className="p-1 hover:bg-gray-200 select-none"
|
||||
onClick={(e) => {
|
||||
setSelected(option);
|
||||
setIsActive(false);
|
||||
}}
|
||||
>
|
||||
{option}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Dropdown;
|
||||
|
||||
//group-active:border-t-transparent group-active:border-b-black group-active:mb-2
|
||||
172
src/components/Header1.tsx
Normal file
172
src/components/Header1.tsx
Normal file
@ -0,0 +1,172 @@
|
||||
import React from "react";
|
||||
import Dropdown from "./Dropdown";
|
||||
import DropDown from "./Drop";
|
||||
import Link from "./Link";
|
||||
import Logo from "./Logo";
|
||||
import Logofreeland from "./Logofreeland";
|
||||
import { useState, useEffect } from "react";
|
||||
// import { Button } from "./Button/Button";
|
||||
import Bell from "./Bell";
|
||||
// import Avatar from "./Avatar";
|
||||
import ContextMenu from "components/containers/contextmenu/ContextMenu";
|
||||
import ContextMenuAction from "components/containers/contextmenu/ContextMenuAction";
|
||||
import Sidebar from "components/Sidebar";
|
||||
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
|
||||
import { Createnew, About, Mylibrary } from "components/pages/Overview";
|
||||
import Navbar from "./Navbar";
|
||||
import Drop from "./Drop";
|
||||
|
||||
// Icons Start -------------------------------------------
|
||||
import { ReactComponent as SVGFiletext } from "assets/svg/filetext.svg";
|
||||
// Icons End -------------------------------------------
|
||||
|
||||
// width and height
|
||||
let Short: boolean;
|
||||
function getWindowDimensions() {
|
||||
const { innerWidth: width, innerHeight: height } = window;
|
||||
|
||||
if (width > 870) {
|
||||
Short = true;
|
||||
} else {
|
||||
Short = false;
|
||||
}
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
};
|
||||
}
|
||||
|
||||
export function useWindowDimensions() {
|
||||
const [windowDimensions, setWindowDimensions] = useState(
|
||||
getWindowDimensions()
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
function handleResize() {
|
||||
setWindowDimensions(getWindowDimensions());
|
||||
}
|
||||
|
||||
window.addEventListener("resize", handleResize);
|
||||
return () => window.removeEventListener("resize", handleResize);
|
||||
}, []);
|
||||
|
||||
return windowDimensions;
|
||||
}
|
||||
// width and height End
|
||||
|
||||
const Header1 = () => {
|
||||
const [selected, setSelected] = useState("MY LIBRARY");
|
||||
const [selectedB, setSelectedB] = useState("About");
|
||||
const { height, width } = useWindowDimensions();
|
||||
return (
|
||||
<header
|
||||
className="header flex justify-between items-center box-border w-full
|
||||
border border-gray-75
|
||||
h-16
|
||||
px-4
|
||||
gap-20
|
||||
lg:gap-40 lg:px-8
|
||||
xl:gap-60 xl:px-16"
|
||||
>
|
||||
{/* Logo and Menu */}
|
||||
<div className="flex gap-8 xl:gap-x-16">
|
||||
{/* Logo */}
|
||||
<a className="Logo flex items-center gap-2 " href="/">
|
||||
<Logo className=" w-10 " />
|
||||
<Logofreeland className="w-28" />
|
||||
</a>
|
||||
|
||||
{/* Menu( Create new - My library - About ) Start */}
|
||||
{Short && (
|
||||
<div
|
||||
className="Menu flex items-center
|
||||
gap-2"
|
||||
>
|
||||
<Link className="text-blue-500 px-4 font-bold" href="#">
|
||||
CREATE NEW
|
||||
</Link>
|
||||
|
||||
{/* Dropdown start */}
|
||||
{/* <ContextMenu button="MY LIBRARY" className="text-white">
|
||||
<ContextMenuAction
|
||||
caption="My publications"
|
||||
action={() => console.log("My publications")}
|
||||
icon={<SVGFiletext className="stroke stroke-white h-5 w-4" />}
|
||||
></ContextMenuAction>
|
||||
<ContextMenuAction
|
||||
caption="My favorites"
|
||||
action={() => console.log("My favorites")}
|
||||
icon={<SVGFiletext className="stroke stroke-white h-5 w-4" />}
|
||||
></ContextMenuAction>
|
||||
</ContextMenu> */}
|
||||
{/* Dropdown End */}
|
||||
<Drop />
|
||||
{/* <Dropdown
|
||||
className=" text-xs md:text-sm"
|
||||
selected={selected}
|
||||
setSelected={setSelected}
|
||||
options={["first", "Second"]}
|
||||
/> */}
|
||||
|
||||
<Drop />
|
||||
{/* <Dropdown
|
||||
className=" text-xs md:text-sm"
|
||||
selected={selectedB}
|
||||
setSelected={setSelectedB}
|
||||
options={["one", "two"]}
|
||||
/> */}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Menu( Create new - My library - About ) End */}
|
||||
</div>
|
||||
<div className="Authentication flex items-center font-bold text-sm gap-4 ">
|
||||
{/* -------------------------------------- */}
|
||||
{/* Buttons Start */}
|
||||
{/* <Button emphasis="low" className="text-xs px-1 md:text-sm lg:px-4">
|
||||
Sign In
|
||||
</Button>
|
||||
<Button
|
||||
emphasis="medium"
|
||||
className="text-xs px-1
|
||||
md:text-sm
|
||||
lg:px-4"
|
||||
>
|
||||
Sign Up
|
||||
</Button> */}
|
||||
{/* Buttons End */}
|
||||
{/* -------------------------------------- */}
|
||||
|
||||
{/* Bell Start */}
|
||||
<button>
|
||||
<Bell className="h-6 w-6" />
|
||||
</button>
|
||||
{/* Bell End */}
|
||||
|
||||
{/* Avatar Start */}
|
||||
{Short && (
|
||||
<button>
|
||||
{/* <Avatar className="bg-[rgb(255,122,69)] text-white">K</Avatar> */}
|
||||
</button>
|
||||
)}
|
||||
{/* Avatar End */}
|
||||
|
||||
{/* Burger Start */}
|
||||
{!Short && (
|
||||
<button>
|
||||
<Navbar />
|
||||
</button>
|
||||
)}
|
||||
{/* Burger End */}
|
||||
</div>
|
||||
{/* <div>{ ({ width } gt " 300px" )&& <span>Hi</span>} </div> */}
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header1;
|
||||
// bg-red-300
|
||||
// sm:bg-sky-400
|
||||
// md:bg-sky-600
|
||||
// lg:bg-sky-800
|
||||
// xl:bg-red-600
|
||||
37
src/components/Headericon.tsx
Normal file
37
src/components/Headericon.tsx
Normal file
@ -0,0 +1,37 @@
|
||||
import React from "react";
|
||||
import classNames from "classnames";
|
||||
export type Props = {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export const SVGFolderplus = ({ className }: Props) => {
|
||||
return (
|
||||
<div className={classNames("", className)}>
|
||||
<svg
|
||||
// width="24"
|
||||
// height="25"
|
||||
viewBox="0 0 24 25"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M20 19.5H4C3.44772 19.5 3 19.0523 3 18.5V6.5C3 5.94772 3.44772 5.5 4 5.5H8.58579C8.851 5.5 9.10536 5.60536 9.29289 5.79289L11.7071 8.20711C11.8946 8.39464 12.149 8.5 12.4142 8.5H20C20.5523 8.5 21 8.94772 21 9.5V18.5C21 19.0523 20.5523 19.5 20 19.5Z"
|
||||
stroke="#262626"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<path
|
||||
d="M13 11.5C13 10.9477 12.5523 10.5 12 10.5C11.4477 10.5 11 10.9477 11 11.5H13ZM11 16.5C11 17.0523 11.4477 17.5 12 17.5C12.5523 17.5 13 17.0523 13 16.5H11ZM11 11.5V16.5H13V11.5H11Z"
|
||||
fill="#262626"
|
||||
/>
|
||||
<path
|
||||
d="M14.5 15C15.0523 15 15.5 14.5523 15.5 14C15.5 13.4477 15.0523 13 14.5 13L14.5 15ZM9.5 13C8.94772 13 8.5 13.4477 8.5 14C8.5 14.5523 8.94772 15 9.5 15L9.5 13ZM14.5 13L9.5 13L9.5 15L14.5 15L14.5 13Z"
|
||||
fill="#262626"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const SVGFolderplusminus = ({ className }: Props) => {
|
||||
return <div className={classNames("", className)}></div>;
|
||||
};
|
||||
21
src/components/Link.tsx
Normal file
21
src/components/Link.tsx
Normal file
@ -0,0 +1,21 @@
|
||||
import React from "react";
|
||||
|
||||
type Props = {
|
||||
href?: string;
|
||||
children: React.ReactNode;
|
||||
disabled?: boolean;
|
||||
className?: string;
|
||||
} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "">;
|
||||
|
||||
export default function Link({ href, children, disabled, ...props }: Props) {
|
||||
return (
|
||||
// eslint-disable-next-line jsx-a11y/anchor-is-valid
|
||||
<a
|
||||
href={disabled ? undefined : href}
|
||||
aria-disabled={disabled}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
42
src/components/Logo.tsx
Normal file
42
src/components/Logo.tsx
Normal file
@ -0,0 +1,42 @@
|
||||
import React from "react";
|
||||
import classNames from "classnames";
|
||||
export type Props = {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
const Logo = ({ className }: Props) => {
|
||||
return (
|
||||
<div className={classNames("", className)}>
|
||||
<svg
|
||||
// width="40"
|
||||
// height="40"
|
||||
viewBox="0 0 40 40"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M14.4144 23.7511C8.27781 15.6345 1.97719 21.8024 3.62218 27.4753C7.75871 36.521 18.4462 40.5011 27.4937 36.364C30.6123 34.9384 33.2592 32.6525 35.1232 29.7747C30.3791 34.2166 21.7659 33.4741 14.4144 23.7497V23.7511Z"
|
||||
fill="#003A8C"
|
||||
/>
|
||||
<path
|
||||
d="M19.9003 18.1623C11.4604 5.36346 1.99988 12.1818 1.99988 20.0029C1.99656 22.5922 2.55489 25.1515 3.63638 27.5043C2.51332 22.2054 8.60318 18.1213 14.273 25.7253C22.5092 36.7684 30.5857 34.8254 35.1069 29.8009C36.5583 27.5725 37.4959 25.0493 37.8517 22.414V22.4486C35.9103 28.4694 27.3438 29.4487 19.9003 18.1623Z"
|
||||
fill="#0050B3"
|
||||
/>
|
||||
<path
|
||||
d="M25.6847 12.4357C19.4173 2.09746 11.4696 3.03152 6.09469 8.56867C3.44128 11.788 1.99328 15.8313 1.99989 20.0029C2.56566 12.4371 11.7164 7.16935 20.0007 20.0029C27.3643 31.4243 36.5384 28.4489 37.8432 22.4812V22.4239C37.9578 21.6113 38.0065 20.7908 37.9889 19.9703V19.1522C34.8 21.434 30.6062 20.553 25.6832 12.435L25.6847 12.4357Z"
|
||||
fill="#096DD9"
|
||||
/>
|
||||
<path
|
||||
d="M25.7278 14.2762C31.4676 23.5022 36.416 21.1419 38.0009 19.1685C37.9371 17.7893 37.714 16.4222 37.3361 15.0943C34.6607 15.1515 34.0369 14.704 31.404 10.6969C27.3806 4.53119 22.3119 0.369312 13.4568 3.23299C10.5865 4.35751 8.05111 6.19656 6.09116 8.57569C12.1761 2.97702 19.6422 4.49654 25.7278 14.2762Z"
|
||||
fill="#40A9FF"
|
||||
/>
|
||||
<path
|
||||
d="M31.0114 11.4889C33.6359 15.5037 35.2335 15.708 37.336 15.095C34.6097 5.51969 24.6358 -0.0323048 15.0593 2.69349C14.5162 2.84763 13.982 3.02747 13.4568 3.23299C21.367 0.737706 26.9774 5.32312 31.0114 11.4889Z"
|
||||
fill="#91D5FF"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Logo;
|
||||
39
src/components/Logofreeland.tsx
Normal file
39
src/components/Logofreeland.tsx
Normal file
File diff suppressed because one or more lines are too long
98
src/components/Navbar.tsx
Normal file
98
src/components/Navbar.tsx
Normal file
@ -0,0 +1,98 @@
|
||||
import React, { Fragment } from "react";
|
||||
import classNames from "classnames";
|
||||
import { Menu, Transition } from "@headlessui/react";
|
||||
import { ChevronDownIcon } from "@heroicons/react/solid";
|
||||
import Burger from "./Burger";
|
||||
|
||||
const Navbar = () => {
|
||||
return (
|
||||
<div>
|
||||
<Menu as="div" className="relative inline-block text-left">
|
||||
<div>
|
||||
<Menu.Button
|
||||
className="inline-flex justify-center w-full rounded-md border
|
||||
border-gray-300 shadow-sm px-1 py-1 bg-white text-sm font-medium
|
||||
text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2
|
||||
focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-black"
|
||||
>
|
||||
<Burger className="h-6 w-6" />
|
||||
</Menu.Button>
|
||||
</div>
|
||||
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items
|
||||
className="origin-top-right absolute right-0 mt-5 w-56 rounded-md
|
||||
shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
>
|
||||
<div className="py-1">
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<a
|
||||
href="#"
|
||||
className={classNames(
|
||||
active ? "bg-gray-100 text-gray-900" : "text-gray-700",
|
||||
"block px-4 py-2 text-sm"
|
||||
)}
|
||||
>
|
||||
CREATE NEW
|
||||
</a>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<a
|
||||
href="#"
|
||||
className={classNames(
|
||||
active ? "bg-gray-100 text-gray-900" : "text-gray-700",
|
||||
"block px-4 py-2 text-sm"
|
||||
)}
|
||||
>
|
||||
MY LIBRARY
|
||||
</a>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<a
|
||||
href="#"
|
||||
className={classNames(
|
||||
active ? "bg-gray-100 text-gray-900" : "text-gray-700",
|
||||
"block px-4 py-2 text-sm"
|
||||
)}
|
||||
>
|
||||
ABOUT
|
||||
</a>
|
||||
)}
|
||||
</Menu.Item>
|
||||
{/* <form method="POST" action="#">
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<button
|
||||
type="submit"
|
||||
className={classNames(
|
||||
active ? "bg-gray-100 text-gray-900" : "text-gray-700",
|
||||
"block w-full text-left px-4 py-2 text-sm"
|
||||
)}
|
||||
>
|
||||
Sign out
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</form> */}
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Navbar;
|
||||
69
src/components/Sidebar.tsx
Normal file
69
src/components/Sidebar.tsx
Normal file
@ -0,0 +1,69 @@
|
||||
import React, { useState } from "react";
|
||||
import { CSSTransition } from "react-transition-group";
|
||||
import classNames from "classnames";
|
||||
import { Link } from "react-router-dom";
|
||||
import styled from "styled-components";
|
||||
import { SidebarData } from "./SidebarData";
|
||||
import Submenu from "./Submenu";
|
||||
import SidebarLink from "./Submenu";
|
||||
import Burger from "./Burger";
|
||||
|
||||
export type Props = {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
const SideBarNav = styled.div<{ sidebar: boolean }>`
|
||||
left: ${({ sidebar }) => (sidebar ? "0" : "100%")};
|
||||
`;
|
||||
|
||||
const Sidebar = ({ className }: Props) => {
|
||||
const [sidebar, setSidebar] = useState(false);
|
||||
const toggleSidebar = () => setSidebar(!sidebar);
|
||||
|
||||
return (
|
||||
<nav className="relative">
|
||||
{/* Nav Start */}
|
||||
<div
|
||||
className="Burger flex items-center justify-start "
|
||||
onClick={toggleSidebar}
|
||||
>
|
||||
<Burger className="w-6 bg-red-400" />
|
||||
</div>
|
||||
{/* Nav End */}
|
||||
|
||||
{/* Side bar Nav Start Lower one */}
|
||||
{sidebar && (
|
||||
<div
|
||||
className="SideBarNav h-44 w-48 bg-sky-800 absolute -right-8 top-12
|
||||
transition duration-1000 "
|
||||
>
|
||||
{/* Side bar Wrap Start */}
|
||||
<div className="SidebarWrap pl-2 pt-2 h-4/5 flex flex-col items-center justify-around ">
|
||||
{/* Burger Start */}
|
||||
{/* <div
|
||||
className="Burger relative w-6 h-6 flex items-center justify-start "
|
||||
onClick={showSidebar}
|
||||
>
|
||||
<span
|
||||
className="w-5 border h-0 border-black rounded
|
||||
|
||||
before:content-[''] before:w-5 before:border before:border-black
|
||||
before:absolute before:rounded before:top-1 before:left-0
|
||||
|
||||
after:content-[''] after:w-5 after:border after:border-black
|
||||
after:absolute after:rounded after:bottom-1 after:left-0"
|
||||
></span>
|
||||
</div> */}
|
||||
{/* Burger End */}
|
||||
{SidebarData.map((item, index) => {
|
||||
return <Submenu item={item} key={index} />;
|
||||
})}
|
||||
</div>
|
||||
{/* Side bar Wrap End */}
|
||||
</div>
|
||||
)}
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
export default Sidebar;
|
||||
28
src/components/SidebarData.tsx
Normal file
28
src/components/SidebarData.tsx
Normal file
@ -0,0 +1,28 @@
|
||||
import { SidebarItem } from "./SidebarItem";
|
||||
|
||||
export const SidebarData: SidebarItem[] = [
|
||||
{
|
||||
title: "CREATE NEW",
|
||||
path: "/overview",
|
||||
},
|
||||
|
||||
{
|
||||
title: "MY LIBRARY",
|
||||
path: "/overview/mylibrary",
|
||||
},
|
||||
|
||||
{
|
||||
title: "ABOUT",
|
||||
path: "/overview/about",
|
||||
},
|
||||
|
||||
// {
|
||||
// title: "Users",
|
||||
// path: "/overview/users",
|
||||
// },
|
||||
|
||||
// {
|
||||
// title: "Revenue",
|
||||
// path: "/overview/revenue",
|
||||
// },
|
||||
];
|
||||
10
src/components/SidebarItem.tsx
Normal file
10
src/components/SidebarItem.tsx
Normal file
@ -0,0 +1,10 @@
|
||||
import React from "react";
|
||||
|
||||
export interface SidebarItem {
|
||||
title: string;
|
||||
path: string;
|
||||
icon?: any;
|
||||
iconOpened?: any;
|
||||
iconClosed?: any;
|
||||
subnav?: SidebarItem[];
|
||||
}
|
||||
35
src/components/Submenu.tsx
Normal file
35
src/components/Submenu.tsx
Normal file
@ -0,0 +1,35 @@
|
||||
// import { iconButton } from "@material-tailwind/react";
|
||||
import { type } from "@testing-library/user-event/dist/type";
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { SidebarItem } from "./SidebarItem";
|
||||
import styled from "styled-components";
|
||||
|
||||
// import styled from "styled-components";
|
||||
|
||||
type SidebarLinkProps = {
|
||||
item: SidebarItem;
|
||||
};
|
||||
|
||||
export const SidebarLink = styled(Link)`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
&:hover {
|
||||
background-color: green;
|
||||
}
|
||||
`;
|
||||
|
||||
// const SidebarLink = ({ item }: SidebarLinkProps) => {
|
||||
const Submenu = ({ item }: SidebarLinkProps) => {
|
||||
return (
|
||||
<>
|
||||
<SidebarLink to={item.path} className="text-white">
|
||||
<div className="select-none">{item.title}</div>
|
||||
<div>{item?.subnav ? item?.iconClosed : item?.iconOpened}</div>
|
||||
</SidebarLink>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Submenu;
|
||||
7
src/components/pages/Createnew.tsx
Normal file
7
src/components/pages/Createnew.tsx
Normal file
@ -0,0 +1,7 @@
|
||||
import React from "react";
|
||||
|
||||
const Createnew = () => {
|
||||
return <div>Createnew</div>;
|
||||
};
|
||||
|
||||
export default Createnew;
|
||||
21
src/components/pages/Overview.tsx
Normal file
21
src/components/pages/Overview.tsx
Normal file
@ -0,0 +1,21 @@
|
||||
import React from "react";
|
||||
|
||||
export const Createnew = () => {
|
||||
return <></>;
|
||||
};
|
||||
|
||||
export const Mylibrary = () => {
|
||||
return <></>;
|
||||
};
|
||||
|
||||
export const About = () => {
|
||||
return <></>;
|
||||
};
|
||||
|
||||
// export const Revenue = () => {
|
||||
// return <div>Revenue</div>;
|
||||
// };
|
||||
|
||||
// export const Order = () => {
|
||||
// return <div>Order</div>;
|
||||
// };
|
||||
7
src/runtime.js
Normal file
7
src/runtime.js
Normal file
@ -0,0 +1,7 @@
|
||||
'use strict';
|
||||
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
module.exports = require('./cjs/react-refresh-runtime.production.min.js');
|
||||
} else {
|
||||
module.exports = require('./cjs/react-refresh-runtime.development.js');
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user