diff --git a/assets/MainLogo.tsx b/assets/MainLogo.tsx new file mode 100644 index 000000000..4e6dc5c2d --- /dev/null +++ b/assets/MainLogo.tsx @@ -0,0 +1,29 @@ +function MainLogo() { + return ( + + + + + + + + + ); +} + +export default MainLogo; diff --git a/assets/icons/BellIcon.tsx b/assets/icons/BellIcon.tsx new file mode 100644 index 000000000..0d4231a65 --- /dev/null +++ b/assets/icons/BellIcon.tsx @@ -0,0 +1,39 @@ +function BellIcon() { + return ( + + + + + + + + ); +} + +export default BellIcon; diff --git a/assets/icons/BottomArrowIcon.tsx b/assets/icons/BottomArrowIcon.tsx new file mode 100644 index 000000000..638290987 --- /dev/null +++ b/assets/icons/BottomArrowIcon.tsx @@ -0,0 +1,15 @@ +function BottomArrowIcon() { + return ( + + + + ); +} + +export default BottomArrowIcon; diff --git a/assets/icons/CalendarIcon.tsx b/assets/icons/CalendarIcon.tsx new file mode 100644 index 000000000..60856bc06 --- /dev/null +++ b/assets/icons/CalendarIcon.tsx @@ -0,0 +1,44 @@ +function CalendarIcon() { + return ( + <> + + + + + + + + ); +} + +export default CalendarIcon; diff --git a/assets/icons/ChatIcon.tsx b/assets/icons/ChatIcon.tsx new file mode 100644 index 000000000..0d29a068f --- /dev/null +++ b/assets/icons/ChatIcon.tsx @@ -0,0 +1,16 @@ +function ChatIcon() { + return ( + + + + + ); +} + +export default ChatIcon; diff --git a/assets/icons/CirclePlusIcon.tsx b/assets/icons/CirclePlusIcon.tsx new file mode 100644 index 000000000..fcd938453 --- /dev/null +++ b/assets/icons/CirclePlusIcon.tsx @@ -0,0 +1,11 @@ +function CirclePlusIcon() { + return ( + + + + + + ); +} + +export default CirclePlusIcon; diff --git a/assets/icons/DiamondIcon.tsx b/assets/icons/DiamondIcon.tsx new file mode 100644 index 000000000..6d8d1d135 --- /dev/null +++ b/assets/icons/DiamondIcon.tsx @@ -0,0 +1,36 @@ +function DiamondIcon() { + return ( + + + + + + + ); +} + +export default DiamondIcon; diff --git a/assets/icons/GiftIcon.tsx b/assets/icons/GiftIcon.tsx new file mode 100644 index 000000000..ae84ecaaa --- /dev/null +++ b/assets/icons/GiftIcon.tsx @@ -0,0 +1,43 @@ +function GiftIcon() { + return ( + + + + + + + + ); +} + +export default GiftIcon; diff --git a/assets/icons/HomeIcon.tsx b/assets/icons/HomeIcon.tsx new file mode 100644 index 000000000..737ef6e6d --- /dev/null +++ b/assets/icons/HomeIcon.tsx @@ -0,0 +1,23 @@ +interface HomeIconProps { + isDark?: boolean; +} + +function HomeIcon({ isDark = true }: HomeIconProps) { + return ( + + + + + ); +} + +export default HomeIcon; diff --git a/assets/icons/LoaderIcon.tsx b/assets/icons/LoaderIcon.tsx new file mode 100644 index 000000000..fc4b957ff --- /dev/null +++ b/assets/icons/LoaderIcon.tsx @@ -0,0 +1,64 @@ +function LoaderIcon() { + return ( + + + + + + + + + + + ); +} + +export default LoaderIcon; diff --git a/assets/icons/LocationDotIcon.tsx b/assets/icons/LocationDotIcon.tsx new file mode 100644 index 000000000..10f980d4a --- /dev/null +++ b/assets/icons/LocationDotIcon.tsx @@ -0,0 +1,20 @@ +function LocationDotIcon() { + return ( + + + + + ); +} + +export default LocationDotIcon; diff --git a/assets/icons/PeopleIcon.tsx b/assets/icons/PeopleIcon.tsx new file mode 100644 index 000000000..7d4603a14 --- /dev/null +++ b/assets/icons/PeopleIcon.tsx @@ -0,0 +1,48 @@ +interface PeopleIconProps { + isDark?: boolean; +} + +function PeopleIcon({ isDark = true }: PeopleIconProps) { + return ( + + + + + + + + + ); +} + +export default PeopleIcon; diff --git a/assets/icons/StatisticsIcon.tsx b/assets/icons/StatisticsIcon.tsx new file mode 100644 index 000000000..ade678ea7 --- /dev/null +++ b/assets/icons/StatisticsIcon.tsx @@ -0,0 +1,30 @@ +interface StatisticsIconProps { + isDark?: boolean; +} + +function StatisticsIcon({ isDark = true }: StatisticsIconProps) { + return ( + + + + + + ); +} + +export default StatisticsIcon; diff --git a/assets/icons/UserCircleIcon.tsx b/assets/icons/UserCircleIcon.tsx new file mode 100644 index 000000000..cdcb87165 --- /dev/null +++ b/assets/icons/UserCircleIcon.tsx @@ -0,0 +1,18 @@ +function UserCircleIcon() { + return ( + + + + + ); +} + +export default UserCircleIcon; diff --git a/assets/icons/UserIcon.tsx b/assets/icons/UserIcon.tsx new file mode 100644 index 000000000..18c1204c6 --- /dev/null +++ b/assets/icons/UserIcon.tsx @@ -0,0 +1,20 @@ +function UserIcon() { + return ( + + + + + ); +} + +export default UserIcon; diff --git a/assets/icons/UserTwoIcon.tsx b/assets/icons/UserTwoIcon.tsx new file mode 100644 index 000000000..eff2a8278 --- /dev/null +++ b/assets/icons/UserTwoIcon.tsx @@ -0,0 +1,43 @@ +function UserTwoIcon() { + return ( + + + + + + + + + + + + + + ); +} + +export default UserTwoIcon; diff --git a/assets/icons/arrows/LeftArrowIcon.tsx b/assets/icons/arrows/LeftArrowIcon.tsx new file mode 100644 index 000000000..115c9c07e --- /dev/null +++ b/assets/icons/arrows/LeftArrowIcon.tsx @@ -0,0 +1,9 @@ +function LeftArrowIcon() { + return ( + + + + ); +} + +export default LeftArrowIcon; diff --git a/assets/icons/arrows/RightArrowIcon.tsx b/assets/icons/arrows/RightArrowIcon.tsx new file mode 100644 index 000000000..8665e8dc1 --- /dev/null +++ b/assets/icons/arrows/RightArrowIcon.tsx @@ -0,0 +1,9 @@ +function RightArrowIcon() { + return ( + + + + ); +} + +export default RightArrowIcon; diff --git a/components/BottomNav.tsx b/components/BottomNav.tsx index 3244aaeaa..feaf863bb 100644 --- a/components/BottomNav.tsx +++ b/components/BottomNav.tsx @@ -1,27 +1,19 @@ -import { - faCirclePlus, - faHandshake as faDefaultHandShake, - faHouse as faDefaultHouse, - faRankingStar as faDefaultRankingStar, - faUsersRectangle as faDefaultUsersRectangle, -} from "@fortawesome/pro-light-svg-icons"; -import { - faHandshake, - faHouse, - faRankingStar, - faUsersRectangle, -} from "@fortawesome/pro-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { Box } from "@chakra-ui/react"; import Link, { LinkProps } from "next/link"; import { usePathname, useSearchParams } from "next/navigation"; import { useSession } from "next-auth/react"; import { useSetRecoilState } from "recoil"; import styled from "styled-components"; +import CirclePlusIcon from "../assets/icons/CirclePlusIcon"; +import HomeIcon from "../assets/icons/HomeIcon"; +import PeopleIcon from "../assets/icons/PeopleIcon"; +import StatisticsIcon from "../assets/icons/StatisticsIcon"; import { HAS_STUDY_TODAY } from "../constants/keys/localStorage"; import { getStudyStandardDate } from "../libs/study/date/getStudyStandardDate"; import { slideDirectionState } from "../recoils/navigationRecoils"; import { convertLocationLangTo } from "../utils/convertUtils/convertDatas"; +import { detectDevice } from "../utils/validationUtils"; interface INavButtonProps { url: string; @@ -45,8 +37,10 @@ export default function BottomNav() { const locationEn = convertLocationLangTo(session?.user.location, "en"); const hasStudyToday = localStorage.getItem(HAS_STUDY_TODAY); + const deviceType = detectDevice(); + return ( -