From 97bae407f8113bfc09d96fb2e4afee4db3feeb68 Mon Sep 17 00:00:00 2001 From: Timur Ercan Date: Tue, 6 Dec 2022 18:49:38 +0100 Subject: [PATCH] settings mock --- apps/web/components/layout.tsx | 31 +-- apps/web/components/settings.tsx | 454 +++++++++++++++++++++++++++++++ apps/web/package-lock.json | 147 ++++------ apps/web/package.json | 1 + apps/web/pages/index.tsx | 2 +- apps/web/pages/settings.tsx | 14 + apps/web/tailwind.config.js | 7 +- 7 files changed, 540 insertions(+), 116 deletions(-) create mode 100644 apps/web/components/settings.tsx create mode 100644 apps/web/pages/settings.tsx diff --git a/apps/web/components/layout.tsx b/apps/web/components/layout.tsx index 5121204ee..aa1185b8c 100644 --- a/apps/web/components/layout.tsx +++ b/apps/web/components/layout.tsx @@ -9,9 +9,9 @@ const user = { "https://pbs.twimg.com/profile_images/1382036502390181888/4BT30oTM_400x400.jpg", }; const navigation = [ - { name: "Dashboard", href: "#", current: true }, - { name: "Team", href: "#", current: false }, - { name: "Settings", href: "#" }, + { name: "Dashboard", href: "/", current: true }, + { name: "Team", href: "/", current: false }, + { name: "Settings", href: "settings" }, ]; const userNavigation = [ { name: "Your Profile", href: "#" }, @@ -200,26 +200,11 @@ export default function Layout({ children }: any) { )} -
-
-
-

- Dashboard -

-
-
-
-
- {/* Replace with your content */} -
-
- {children} -
-
- {/* /End replace */} -
-
-
+
+
+
{children}
+
+
); diff --git a/apps/web/components/settings.tsx b/apps/web/components/settings.tsx new file mode 100644 index 000000000..f6233d165 --- /dev/null +++ b/apps/web/components/settings.tsx @@ -0,0 +1,454 @@ +import { Fragment, useState } from "react"; +import { Disclosure, Menu, Switch, Transition } from "@headlessui/react"; +import { MagnifyingGlassIcon } from "@heroicons/react/20/solid"; +import { + Bars3Icon, + BellIcon, + CogIcon, + CreditCardIcon, + KeyIcon, + SquaresPlusIcon, + UserCircleIcon, + XMarkIcon, +} from "@heroicons/react/24/outline"; + +const user = { + name: "Debbie Lewis", + handle: "deblewis", + email: "debbielewis@example.com", + imageUrl: + "https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=320&h=320&q=80", +}; + +const subNavigation = [ + { name: "Profile", href: "#", icon: UserCircleIcon, current: true }, + { name: "Account", href: "#", icon: CogIcon, current: false }, + { name: "Password", href: "#", icon: KeyIcon, current: false }, + { name: "Notifications", href: "#", icon: BellIcon, current: false }, + { name: "Billing", href: "#", icon: CreditCardIcon, current: false }, + { name: "Integrations", href: "#", icon: SquaresPlusIcon, current: false }, +]; +const userNavigation = [ + { name: "Your Profile", href: "#" }, + { name: "Settings", href: "#" }, + { name: "Sign out", href: "#" }, +]; + +function classNames(...classes: any) { + return classes.filter(Boolean).join(" "); +} + +export default function Setttings() { + const [availableToHire, setAvailableToHire] = useState(true); + const [privateAccount, setPrivateAccount] = useState(false); + const [allowCommenting, setAllowCommenting] = useState(true); + const [allowMentions, setAllowMentions] = useState(true); + + return ( +
+
+
+
+

+ Dashboard +

+
+
+
+
+
+
+ + +
+ {/* Profile section */} +
+
+

+ Profile +

+

+ This information will be displayed publicly so be careful + what you share. +

+
+ +
+
+
+ +
+ + workcation.com/ + + +
+
+ +
+ +
+