diff --git a/components/index.ts b/components/index.ts index 3fe34e7..fda8d0e 100644 --- a/components/index.ts +++ b/components/index.ts @@ -3,10 +3,12 @@ import LoginButton from './widgets/login/LoginButton'; import TaggedInput from './widgets/TaggedInput'; import ImageUpload from './widgets/ImageUpload'; import SharingComponent from './widgets/SharingComponent'; +import UserNavDropdown from './widgets/UserNavDropdown'; export { GifContainer, LoginButton, TaggedInput, ImageUpload, SharingComponent, + UserNavDropdown, }; diff --git a/components/layout/Navbar.tsx b/components/layout/Navbar.tsx index 4be5303..8d8f9b3 100644 --- a/components/layout/Navbar.tsx +++ b/components/layout/Navbar.tsx @@ -1,69 +1,297 @@ -import React from 'react'; +import React, { Fragment } from 'react'; +import { MagnifyingGlassIcon } from '@heroicons/react/24/solid'; +import { BellIcon, AcademicCapIcon, XIcon } from '@heroicons/react/24/outline'; import Image from 'next/image'; -import { LoginButton } from '@components'; +import { useSession } from 'next-auth/react'; +import { Disclosure, Menu, Transition } from '@headlessui/react'; import Link from 'next/link'; +import { useRouter } from 'next/router'; +function classNames(...classes) { + return classes.filter(Boolean).join(' '); +} const Navbar = () => { + const { data: session } = useSession(); + const router = useRouter(); + const currentRoute = router.pathname; return ( -
-
-
- - -
- - Open Gifame - -
-
-
- -
- -
-
- -
-
+ + {({ open }) => ( + <> +
+
+
+
+
+ + + Workflow + + +
+
+ + + Workflow + + +
+
+
+ +
+
+
+
+ +
+
+
+ +
+
+
+
+ {/* Mobile menu button */} + + Open main menu + {open ? ( + +
+
+
+ + + {/* Profile dropdown */} + +
+ + Open user menu + + +
+ + + + {({ active }) => ( + + Your Profile + + )} + + + {({ active }) => ( + + Settings + + )} + + + {({ active }) => ( + + Sign out + + )} + + + + +
+
+
+
+ + +
+ {/* Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" */} + + Dashboard + + + Team + + + Projects + + + Calendar + +
+
+
+
+ +
+
+
+ Tom Cook +
+
+ tom@example.com +
+
+ +
+
+ + Your Profile + + + Settings + + + Sign out + +
+
+ + + )} + ); }; diff --git a/components/widgets/UserNavDropdown.tsx b/components/widgets/UserNavDropdown.tsx new file mode 100644 index 0000000..6a30733 --- /dev/null +++ b/components/widgets/UserNavDropdown.tsx @@ -0,0 +1,43 @@ +import { logger } from '@lib/logger'; +import React from 'react'; +import { UserCircleIcon } from '@heroicons/react/24/solid'; +import { signOut } from 'next-auth/react'; + +interface IUserNavDropdownProps { + session: any; +} +const UserNavDropdown: React.FC = ({ session }) => { + React.useEffect(() => { + logger.debug('UserNavDropdown', 'session', session); + }, [session]); + + return ( +
+ + +
+ ); +}; + +export default UserNavDropdown; diff --git a/components/widgets/login/LoginButton.tsx b/components/widgets/login/LoginButton.tsx index b10d9fe..f79d042 100644 --- a/components/widgets/login/LoginButton.tsx +++ b/components/widgets/login/LoginButton.tsx @@ -1,21 +1,18 @@ import React from 'react'; -import { useSession, signIn, signOut } from 'next-auth/react'; +import { signIn } from 'next-auth/react'; import { ArrowLeftCircleIcon, ArrowRightCircleIcon, } from '@heroicons/react/24/outline'; +import { UserNavDropdown } from '@components'; -const LoginButton = () => { - const { data: session } = useSession(); +interface ILoginButtonProps { + session: any; +} + +const LoginButton: React.FC = ({ session }) => { return session ? ( - + ) : (
- handleProviderAuth('Github')} + className="inline-flex justify-center w-full px-2 py-1 btn btn-outline " > Sign in with Twitter { > - +
- handleProviderAuth('Github')} + className="inline-flex justify-center w-full px-2 py-1 btn btn-outline " > Sign in with GitHub { clipRule="evenodd" /> - +
diff --git a/pages/auth/signup.tsx b/pages/auth/signup.tsx index 6f98edd..3207f06 100644 --- a/pages/auth/signup.tsx +++ b/pages/auth/signup.tsx @@ -1,6 +1,5 @@ -import { signIn } from 'next-auth/react'; import React, { FormEventHandler } from 'react'; -import Router, { useRouter } from 'next/router'; +import { useRouter } from 'next/router'; import { logger } from '@lib/logger'; const SignUpPage = () => { diff --git a/pages/request.tsx b/pages/request.tsx new file mode 100644 index 0000000..c690edc --- /dev/null +++ b/pages/request.tsx @@ -0,0 +1,25 @@ +import React from 'react'; + +const RequestPage = () => { + return ( +
+
+

+ + Work in progress + + + Request a gif + +

+

+ Here you can allow your users to request a gif, if you have the TV + Show module enabled you can allow Season/Episode/Timestamp/Duration + type stuff +

+
+
+ ); +}; + +export default RequestPage; diff --git a/prisma/migrations/20221018183927_add_required_user_fields_back/migration.sql b/prisma/migrations/20221018183927_add_required_user_fields_back/migration.sql new file mode 100644 index 0000000..69ea3cc --- /dev/null +++ b/prisma/migrations/20221018183927_add_required_user_fields_back/migration.sql @@ -0,0 +1,5 @@ +-- AlterTable +ALTER TABLE "User" ADD COLUMN "emailVerified" TIMESTAMP(3), +ADD COLUMN "image" TEXT, +ADD COLUMN "name" TEXT, +ALTER COLUMN "email" DROP NOT NULL; diff --git a/prisma/migrations/20221018184019_make_user_password_optional/migration.sql b/prisma/migrations/20221018184019_make_user_password_optional/migration.sql new file mode 100644 index 0000000..0b600a7 --- /dev/null +++ b/prisma/migrations/20221018184019_make_user_password_optional/migration.sql @@ -0,0 +1,2 @@ +-- AlterTable +ALTER TABLE "User" ALTER COLUMN "password" DROP NOT NULL; diff --git a/prisma/schema.prisma b/prisma/schema.prisma index b3f4bcd..8001330 100644 --- a/prisma/schema.prisma +++ b/prisma/schema.prisma @@ -40,13 +40,16 @@ model Session { } model User { - id String @id @default(cuid()) - email String @unique - password String - accounts Account[] - sessions Session[] - Tags Tags[] - Gif Gif[] + id String @id @default(cuid()) + password String? + name String? + email String? @unique + emailVerified DateTime? + image String? + accounts Account[] + sessions Session[] + Tags Tags[] + Gif Gif[] } model VerificationToken { diff --git a/public/img/icon.svg b/public/img/icon.svg new file mode 100644 index 0000000..ac445db --- /dev/null +++ b/public/img/icon.svg @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/yarn.lock b/yarn.lock index 5d6ee61..11d2bce 100644 --- a/yarn.lock +++ b/yarn.lock @@ -42,6 +42,11 @@ resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6" integrity sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw== +"@headlessui/react@^1.7.3": + version "1.7.3" + resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.3.tgz#853c598ff47b37cdd192c5cbee890d9b610c3ec0" + integrity sha512-LGp06SrGv7BMaIQlTs8s2G06moqkI0cb0b8stgq7KZ3xcHdH3qMP+cRyV7qe5x4XEW/IGY48BW4fLesD6NQLng== + "@heroicons/react@^2.0.12": version "2.0.12" resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-2.0.12.tgz#7e5a16c82512f89a30266dd36f8b8465b3e3e216"