From f75f1f450f64eb8071138eb228d10df90ba77d21 Mon Sep 17 00:00:00 2001 From: hduoc2003 Date: Tue, 17 Oct 2023 21:39:40 +0700 Subject: [PATCH] #2 done --- app/(user)/blank.tsx | 0 app/layout.tsx | 22 +- app/loading.tsx | 9 + app/page.tsx | 10 +- app/signin/page.tsx | 7 + app/signup/page.tsx | 7 + components/blank.tsx | 0 components/common/SearchBar.tsx | 19 + components/layouts/Footer.tsx | 23 + components/layouts/Header.tsx | 152 ++++ components/layouts/NavBar.tsx | 87 ++ package-lock.json | 1063 ++++++++++++++++++++++- package.json | 7 +- public/images/my-subjects.svg | 13 + public/images/uet-logo.svg | 9 + redux/auth/actions/changeAuthState.ts | 10 + redux/auth/authSelector.ts | 4 + redux/auth/authSlice.ts | 22 + redux/blank.tsx | 0 redux/provider.tsx | 11 + redux/store.ts | 11 + styles/blank.tsx | 0 styles/fonts.ts | 2 + styles/theme.ts | 12 + tailwind.config.ts | 10 + app/(admin)/blank.tsx => utils/blank.ts | 0 utils/blank.tsx | 0 27 files changed, 1502 insertions(+), 8 deletions(-) delete mode 100644 app/(user)/blank.tsx create mode 100644 app/loading.tsx create mode 100644 app/signin/page.tsx create mode 100644 app/signup/page.tsx delete mode 100644 components/blank.tsx create mode 100644 components/common/SearchBar.tsx create mode 100644 components/layouts/Footer.tsx create mode 100644 components/layouts/Header.tsx create mode 100644 components/layouts/NavBar.tsx create mode 100644 public/images/my-subjects.svg create mode 100644 public/images/uet-logo.svg create mode 100644 redux/auth/actions/changeAuthState.ts create mode 100644 redux/auth/authSelector.ts create mode 100644 redux/auth/authSlice.ts delete mode 100644 redux/blank.tsx create mode 100644 redux/provider.tsx create mode 100644 redux/store.ts delete mode 100644 styles/blank.tsx create mode 100644 styles/fonts.ts create mode 100644 styles/theme.ts rename app/(admin)/blank.tsx => utils/blank.ts (100%) delete mode 100644 utils/blank.tsx diff --git a/app/(user)/blank.tsx b/app/(user)/blank.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/app/layout.tsx b/app/layout.tsx index a32b253..2516b1d 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,8 +1,13 @@ +'use client'; +import Header from '@/components/layouts/Header' import './globals.css' import type { Metadata } from 'next' -import { Inter } from 'next/font/google' +import Footer from '@/components/layouts/Footer' +import { ReduxProvider } from '@/redux/provider'; +import NavBar from '@/components/layouts/NavBar'; +import { THEME } from '@/styles/theme'; +import { MAIN_FONT } from '@/styles/fonts'; -const inter = Inter({ subsets: ['latin'] }) export const metadata: Metadata = { title: 'UETable', @@ -16,7 +21,18 @@ export default function RootLayout({ }) { return ( - {children} + + +
+ +
+
+ {children} +
+
+
+ + ) } diff --git a/app/loading.tsx b/app/loading.tsx new file mode 100644 index 0000000..5b881fd --- /dev/null +++ b/app/loading.tsx @@ -0,0 +1,9 @@ +'use client'; + +export default function Loading() { + return ( +
+

Loading

+
+ ); +} diff --git a/app/page.tsx b/app/page.tsx index 7a8286b..7d79ebb 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,8 +1,10 @@ import Image from 'next/image' +import { Inter } from 'next/font/google' +const inter = Inter({ subsets: ['latin'] }) export default function Home() { return ( -
+

Get started by editing  @@ -111,3 +113,9 @@ export default function Home() {

) } + +// export default function Home() { +// return ( +//
+// ) +// } diff --git a/app/signin/page.tsx b/app/signin/page.tsx new file mode 100644 index 0000000..18db1ae --- /dev/null +++ b/app/signin/page.tsx @@ -0,0 +1,7 @@ +import React from 'react' + +export default function SignIn() { + return ( +
SignIn
+ ) +} diff --git a/app/signup/page.tsx b/app/signup/page.tsx new file mode 100644 index 0000000..e3770de --- /dev/null +++ b/app/signup/page.tsx @@ -0,0 +1,7 @@ +import React from 'react' + +export default function SignUp() { + return ( +
SignUp
+ ) +} diff --git a/components/blank.tsx b/components/blank.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/components/common/SearchBar.tsx b/components/common/SearchBar.tsx new file mode 100644 index 0000000..e27d433 --- /dev/null +++ b/components/common/SearchBar.tsx @@ -0,0 +1,19 @@ +import { Input } from 'antd' +import React from 'react' +import { BiSearchAlt } from "react-icons/bi"; + +export default function SearchBar({ + onSearch +}: { + onSearch: (value: string) => void +}): React.JSX.Element { + return ( + + ) +} diff --git a/components/layouts/Footer.tsx b/components/layouts/Footer.tsx new file mode 100644 index 0000000..7b711ee --- /dev/null +++ b/components/layouts/Footer.tsx @@ -0,0 +1,23 @@ +import Image from 'next/image' +import React from 'react' +import UETLogo from '../../public/images/uet-logo.svg'; +import { THEME } from '@/styles/theme'; + +export default function Footer() { + return ( +
+
+
+
+ uet-logo +
+
+ Trường Đại học Công nghệ, Đại học Quốc gia Hà Nội +
+
Nhà E3, 144 Xuân Thuỷ, Cầu Giấy, Hà Nội
+
+
+
+
+ ) +} diff --git a/components/layouts/Header.tsx b/components/layouts/Header.tsx new file mode 100644 index 0000000..0132384 --- /dev/null +++ b/components/layouts/Header.tsx @@ -0,0 +1,152 @@ +"use client"; + +import { THEME } from "@/styles/theme"; +import React, { ReactNode, useState } from "react"; +import { useDispatch, useSelector } from "react-redux"; +import { authActions } from "@/redux/auth/authSlice"; +import { authSelector } from "@/redux/auth/authSelector"; +import { Avatar, Badge, Select } from "antd"; +import { IoNotificationsOutline, IoNotifications } from "react-icons/io5"; +import SearchBar from "../common/SearchBar"; +import Link from "next/link"; +import { MAIN_FONT } from "@/styles/fonts"; + +const languages = ['Tiếng Việt', 'English']; + + +interface TabProps { + selected: boolean; + children: ReactNode; +} + +const Tab: React.FC = ({ selected, children }: TabProps) => { + const [hover, setHover] = useState(false); + + return ( + + ); +}; + +export default function Header() { + const dispatch = useDispatch(); + const authState = useSelector(authSelector); + const [avtURL, setAvtURL] = useState('https://yt3.googleusercontent.com/-CFTJHU7fEWb7BYEb6Jh9gm1EpetvVGQqtof0Rbh-VQRIznYYKJxCaqv_9HeBcmJmIsp2vOO9JU=s900-c-k-c0x00ffffff-no-rj') + const [avtStrokeColor, setAvtStrokeColor] = useState(THEME.PRIMARY_COLOR); + const [notiCount, setNotiCount] = useState(10) + + const handleSignIn = (): void => { + dispatch(authActions.updateAuthState({ + signedIn: true, + username: "21020059", + name: "Bùi Huy Dược" + })) + }; + + const handleSignOut = (): void => { + dispatch(authActions.updateAuthState({ + signedIn: false + })) + }; + + const handleOnSearch = (value: string): void => { + console.log(value) + } + + return ( +
+ {/* */} +
+ +
+