Skip to content

Commit

Permalink
Merge pull request #243 from Alforoan/footer
Browse files Browse the repository at this point in the history 
added footer component
  • Loading branch information
@Alforoan
Alforoan authored Aug 29, 2024
2 parents 09565ad + dd0fcfc commit 953c556
Show file tree
Hide file tree
Showing 4 changed files with 218 additions and 58 deletions.
197 changes: 143 additions & 54 deletions client/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {
Routes,
Navigate,
} from "react-router-dom";
import { Box, useColorModeValue } from "@chakra-ui/react";
import { Box, useColorModeValue, Flex } from "@chakra-ui/react";
import Navbar from "./components/Navbar";
import Home from "./pages/Home";
import Templates from "./pages/Templates";
Expand All @@ -20,6 +20,7 @@ import "./index.css";
import NewBoard from "./pages/NewBoard";
import Board from "./pages/Board";
import UserTemplates from "./pages/UserTemplates";
import Footer from "./components/Footer";

function App() {
const { isAuthenticated, isLoading } = useAuth0();
Expand All @@ -34,67 +35,155 @@ function App() {
return (
<HelmetProvider>
<Router>
<Box
minH="100vh"
<Flex
direction="column"
minHeight="100vh"
fontFamily="Roboto, Helvetica, sans-serif"
bg={bgColor}
className="transition-all duration-500 ease-in-out"
>
<Navbar />
<Routes>
<Route
path="/"
element={!isAuthenticated ? <Landing /> : <Navigate to="/home" />}
/>
<Route
path="/home"
element={isAuthenticated ? <Home /> : <Navigate to="/" />}
/>
<Route
path="/templates"
element={isAuthenticated ? <Templates /> : <Navigate to="/" />}
/>
<Route
path="/new"
element={isAuthenticated ? <NewBoard /> : <Navigate to="/" />}
/>
<Route
path="/board"
element={isAuthenticated ? <Board /> : <Navigate to="/" />}
/>
<Route
path="/account"
element={isAuthenticated ? <Account /> : <Navigate to="/" />}
/>
<Route
path="/uploads"
element={
isAuthenticated ? <UserTemplates /> : <Navigate to="/" />
}
/>
<Route
path="/admin_dashboard"
element={isAdmin ? <AdminDashboard /> : <Navigate to="/" />}
/>
<Route
path="/callback"
element={isAuthenticated ? <Home /> : <Navigate to="/home" />}
/>
<Route
path="*"
element={
isAuthenticated ? (
<ErrorPage />
) : (
<Navigate to="/home" replace />
)
}
/>
</Routes>
</Box>
<Box as="main" flex="1" p={4}>
<Routes>
<Route
path="/"
element={
!isAuthenticated ? <Landing /> : <Navigate to="/home" />
}
/>
<Route
path="/home"
element={isAuthenticated ? <Home /> : <Navigate to="/" />}
/>
<Route
path="/templates"
element={isAuthenticated ? <Templates /> : <Navigate to="/" />}
/>
<Route
path="/new"
element={isAuthenticated ? <NewBoard /> : <Navigate to="/" />}
/>
<Route
path="/board"
element={isAuthenticated ? <Board /> : <Navigate to="/" />}
/>
<Route
path="/account"
element={isAuthenticated ? <Account /> : <Navigate to="/" />}
/>
<Route
path="/uploads"
element={
isAuthenticated ? <UserTemplates /> : <Navigate to="/" />
}
/>
<Route
path="/admin_dashboard"
element={isAdmin ? <AdminDashboard /> : <Navigate to="/" />}
/>
<Route
path="/callback"
element={isAuthenticated ? <Home /> : <Navigate to="/home" />}
/>
<Route
path="*"
element={
isAuthenticated ? (
<ErrorPage />
) : (
<Navigate to="/home" replace />
)
}
/>
</Routes>
</Box>
<Footer />
</Flex>
</Router>
</HelmetProvider>
);
}

export default App;

// function App() {
// const { isAuthenticated, isLoading } = useAuth0();
// const { isAdmin } = useAuth();

// const bgColor = useColorModeValue("white", "#313338");

// if (isLoading) {
// return <Loading isLoading={isLoading} />;
// }

// return (
// <HelmetProvider>
// <Router>
// <Flex
// direction="column"
// minH="100vh"
// fontFamily="Roboto, Helvetica, sans-serif"
// bg={bgColor}
// className="transition-all duration-500 ease-in-out"
// >
// <Navbar />
// <Box as="main" flex="1" p={4}>
// <Routes>
// <Route
// path="/"
// element={!isAuthenticated ? <Landing /> : <Navigate to="/home" />}
// />
// <Route
// path="/home"
// element={isAuthenticated ? <Home /> : <Navigate to="/" />}
// />
// <Route
// path="/templates"
// element={isAuthenticated ? <Templates /> : <Navigate to="/" />}
// />
// <Route
// path="/new"
// element={isAuthenticated ? <NewBoard /> : <Navigate to="/" />}
// />
// <Route
// path="/board"
// element={isAuthenticated ? <Board /> : <Navigate to="/" />}
// />
// <Route
// path="/account"
// element={isAuthenticated ? <Account /> : <Navigate to="/" />}
// />
// <Route
// path="/uploads"
// element={
// isAuthenticated ? <UserTemplates /> : <Navigate to="/" />
// }
// />
// <Route
// path="/admin_dashboard"
// element={isAdmin ? <AdminDashboard /> : <Navigate to="/" />}
// />
// <Route
// path="/callback"
// element={isAuthenticated ? <Home /> : <Navigate to="/home" />}
// />
// <Route
// path="*"
// element={
// isAuthenticated ? (
// <ErrorPage />
// ) : (
// <Navigate to="/home" replace />
// )
// }
// />
// </Routes>
// </Box>
// <Footer />
// </Flex>
// </Router>
// </HelmetProvider>
// );
// }

// export default App;
71 changes: 71 additions & 0 deletions client/src/components/Footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import React from "react";
import {
Box,
IconButton,
useColorModeValue,
Stack,
Flex,
} from "@chakra-ui/react";
import { FaTwitter, FaInstagram, FaFacebook } from "react-icons/fa";

const Footer: React.FC = () => {
return (
<Box
bg={useColorModeValue("gray.100", "gray.900")}
color={useColorModeValue("gray.800", "gray.200")}
px={4}
py={6}
h={16}
borderTop="1px"
borderColor="gray.100"
className="transition-all duration-500 ease-in-out"
>
<Flex direction="row" align="center" justify="space-between" h="100%">
<Box flex="1" textAlign="left">
<Box
fontSize="sm"
fontWeight="bold"
color={useColorModeValue("gray.900", "gray.400")}
>
&copy; {new Date().getFullYear()} StudyFlow
</Box>
</Box>
<Box>
<Stack direction="row" spacing={6}>
<IconButton
as="a"
href="https://facebook.com/yourhandle"
aria-label="Facebook"
icon={<FaFacebook />}
variant="link"
size="lg"
_hover={{
color: useColorModeValue("facebook.600", "facebook.400"),
}}
/>
<IconButton
as="a"
href="https://twitter.com/yourhandle"
aria-label="Twitter"
icon={<FaTwitter />}
variant="link"
size="lg"
_hover={{ color: useColorModeValue("blue.600", "blue.400") }}
/>
<IconButton
as="a"
href="https://instagram.com/yourhandle"
aria-label="Instagram"
icon={<FaInstagram />}
variant="link"
size="lg"
_hover={{ color: useColorModeValue("#C13584", "#C13584") }}
/>
</Stack>
</Box>
</Flex>
</Box>
);
};

export default Footer;
4 changes: 2 additions & 2 deletions client/src/components/StackedCards.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const StackedCards: React.FC = () => {
return (
<div className="relative flex justify-center items-center text-primaryText pb-8">
<div className="relative">
<div className="absolute z-0 transform p-4 lg:w-80 shadow-md rounded-lg top-12 -left-8 lg:-left-20 lg:top-32 md:w-80"
<div className="absolute z-0 transform p-4 lg:w-80 shadow-md rounded-lg top-12 -left-8 lg:-left-20 lg:top-20 md:w-80"
style={{ backgroundColor: "#FEFCBF" }}
>
<h2 className="text-lg font-bold mb-2">Quick Sort</h2>
Expand All @@ -18,7 +18,7 @@ const StackedCards: React.FC = () => {
<p className="mt-1">Time Estimate: 90 Minutes</p>
<p className="mt-1">Column: Backlog</p>
</div>
<div className="relative z-10 p-4 lg:w-80 md:w-80 shadow-md rounded-lg -right-8 lg:-right-20 lg:-top-20"
<div className="relative z-10 p-4 lg:w-80 md:w-80 shadow-md rounded-lg -right-8 lg:-right-20 lg:-top-32"
style={{ backgroundColor: "#bee3f8" }}
>
<h2 className="text-lg font-bold mb-2">Merge Sort</h2>
Expand Down
4 changes: 2 additions & 2 deletions client/src/pages/Landing.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ const Landing: React.FC = () => {
const { loginWithRedirect } = useAuth0();

return (
<Container maxW="container.xl" py={8}>
<Container maxW="container.xl" py={{ base: 2, sm: 4, md: 4 }}>
<Helmet>
<title>Welcome to StudyFlow - Organize and Track Your Learning</title>
</Helmet>
Expand Down Expand Up @@ -122,7 +122,7 @@ const Landing: React.FC = () => {
</Stack>

{/* Features and Stacked Cards on larger screens */}
<Grid templateColumns={{ base: "1fr", lg: "1fr 1fr" }} gap={8} mt={{ base: 20, md: 32, lg: 40 }}>
<Grid templateColumns={{ base: "1fr", lg: "1fr 1fr" }} gap={8} mt={{ base: 10, md: 32, lg: 40 }}>
{/* Feature descriptions */}
<GridItem>
<Stack spacing={8}>
Expand Down

0 comments on commit 953c556

Please sign in to comment.