-
Notifications
You must be signed in to change notification settings - Fork 19
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #71 from mahendrameghwal/feature/make-new-layout
Feature/make new layout
- Loading branch information
Showing
8 changed files
with
2,764 additions
and
3,084 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| import React, { Fragment, useEffect } from "react"; | ||
| import Button from "../components/Button"; | ||
| import arrowRight from "../assets/arrow-right.svg"; | ||
| import Accordion from "../components/Accordion"; | ||
| import Modal from "../components/Modal"; | ||
| import Feature6 from "../components/TopHeader"; | ||
| import Footer from "../components/Footer"; | ||
| import Login from "../components/Login"; | ||
| import BottomNav from "./Bottom Nav bar/BottomNavBar"; | ||
| import { Outlet, useLocation } from "react-router-dom"; | ||
| import RouteComponent from "./RouteComponent"; | ||
| import Homepage from "../pages/Homepage"; | ||
| import ButtonDoc from "../pages/ButtonDoc"; | ||
| import { ModalPage } from "../pages/ModalPage"; | ||
| import { FooterPage } from "../pages/FooterPage"; | ||
| import { Avatar } from "../pages/Avatar"; | ||
| import { Card } from "../pages/Card"; | ||
| import { Alert } from "../pages/Alert"; | ||
|
|
||
| const Content = () => { | ||
| const location = useLocation(); | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| const getComponentForPath = (path) => { | ||
|
|
||
|
|
||
|
|
||
| switch (path) { | ||
| case '/': | ||
| return <RouteComponent />; | ||
| case '/button': | ||
| return <ButtonDoc />; | ||
| case '/Modal': | ||
| return <ModalPage />; | ||
| case '/Footer': | ||
| return <FooterPage />; | ||
| case '/Avatar': | ||
| return <Avatar />; | ||
| case '/card': | ||
| return <Card />; | ||
| case '/alert': | ||
| case '/badge': | ||
| return <Card />; | ||
|
|
||
| default: | ||
| return null; // Return a default component or handle not found | ||
| } | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
|
|
||
| }, [location.pathname, getComponentForPath]); | ||
|
|
||
|
|
||
| // Define a function to get the component based on the URL endpoint | ||
|
|
||
| return ( | ||
| <Fragment> | ||
| <div className="max-md:p-1 sm:ml-64" > | ||
| <div className="min-h-screen py-5"> | ||
| <div className="flex flex-col items-center space-y-4"> | ||
| { | ||
| getComponentForPath(location.pathname) | ||
| } | ||
|
|
||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
|
|
||
| </Fragment> | ||
| ); | ||
| }; | ||
|
|
||
| export default Content; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| import React from 'react'; | ||
| import Button from "../components/Button"; | ||
| import arrowRight from "../assets/arrow-right.svg"; | ||
| import Accordion from "../components/Accordion"; | ||
| import Modal from "../components/Modal"; | ||
| import Feature6 from "../components/TopHeader"; | ||
| import Footer from "../components/Footer"; | ||
| import Login from "../components/Login"; | ||
| import BottomNav from "./Bottom Nav bar/BottomNavBar"; | ||
| import { Outlet } from 'react-router-dom'; | ||
|
|
||
|
|
||
| const RouteComponent = () => { | ||
| const accordionItems = [ | ||
| { title: "Section 1", content: "Content for Section 1" }, | ||
| { title: "Section 2", content: "Content for Section 2" }, | ||
| ]; | ||
| return ( | ||
|
|
||
|
|
||
| <div className="max-md:p-1 " > | ||
| <div className="min-h-screen py-5"> | ||
| <div className="flex flex-col items-center space-y-4"> | ||
|
|
||
| {/* Default Button */} | ||
| <Button>Default Button</Button> | ||
|
|
||
| {/* Customized Button 1 */} | ||
| <Button | ||
| iconURL={arrowRight} | ||
| borderColor={"border-black"} | ||
| textColor={"text-white"} | ||
| backgroundColor={"bg-black"} | ||
| > | ||
| Customized Button 1 | ||
| </Button> | ||
|
|
||
| {/* Customized Button 2 */} | ||
| <Button | ||
| borderColor={"border-blue-500"} | ||
| textColor={"text-blue-500"} | ||
| backgroundColor={"bg-white"} | ||
| > | ||
| Customized Button 2 | ||
| </Button> | ||
|
|
||
| {/* Customized Button 3 */} | ||
| <Button | ||
| borderColor={"border-green-500"} | ||
| textColor={"text-green-500"} | ||
| backgroundColor={"bg-white"} | ||
| > | ||
| Customized Button 3 | ||
| </Button> | ||
|
|
||
| <Accordion items={accordionItems} /> | ||
| <Login /> | ||
| <Feature6 /> | ||
| <Modal /> | ||
| <Footer /> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default RouteComponent |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,124 @@ | ||
| import { useState } from "react"; | ||
| import { NavLink, useNavigate } from "react-router-dom"; | ||
| import {FcMenu} from "react-icons/fc" | ||
| const Sidebar = () => { | ||
| const [showSidebar, setShowSidebar] = useState(false); | ||
| const [showProfile, SetshowProfile] = useState(false); | ||
| const navigate = useNavigate() | ||
| const HandleContent= (link)=>{ | ||
| navigate(link) | ||
| } | ||
|
|
||
| const toggleSidebar = () => { | ||
| setShowSidebar(!showSidebar); | ||
| }; | ||
|
|
||
| return ( | ||
| <div> | ||
| <nav className="fixed top-0 z-50 w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700"> | ||
| <div className="px-3 py-3 lg:px-5 lg:pl-3"> | ||
| <div className="flex items-center justify-between"> | ||
| <div className="flex items-center justify-start"> | ||
| <button | ||
| onClick={toggleSidebar} | ||
| data-drawer-target="logo-sidebar" | ||
| data-drawer-toggle="logo-sidebar" | ||
| aria-controls="logo-sidebar" | ||
| type="button" | ||
| className="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg sm:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" | ||
| > | ||
| <FcMenu size={20}/> | ||
| </button> | ||
| <p className="flex gap-x-2 items-center ml-2 md:mr-24"> | ||
| <svg | ||
| id="logo-35" | ||
| className="h-6" | ||
| viewBox="0 0 50 39" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| {" "} | ||
| <path | ||
| d="M16.4992 2H37.5808L22.0816 24.9729H1L16.4992 2Z" | ||
| className="ccompli1" | ||
| fill="#007AFF" | ||
| ></path>{" "} | ||
| <path | ||
| d="M17.4224 27.102L11.4192 36H33.5008L49 13.0271H32.7024L23.2064 27.102H17.4224Z" | ||
| class="ccustom" | ||
| fill="#312ECB" | ||
| ></path>{" "} | ||
| </svg> | ||
| <span className="self-center text-xl font-semibold sm:text-2xl whitespace-nowrap dark:text-white"> | ||
|
|
||
| <p className="bg-gradient-to-r from-green-300 via-blue-200 to-purple-500 bg-clip-text text-xl font-bold text-transparent text-center my-1 max-md:text-xl">Web Componentify</p> | ||
| </span> | ||
| </p> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
| </nav> | ||
|
|
||
| <aside | ||
| onClick={toggleSidebar} | ||
| className={`fixed top-0 left-0 z-40 w-64 h-screen pt-20 transition-transform ${ | ||
| showSidebar ? "translate-x-0" : "-translate-x-full" | ||
| } bg-white border-r border-gray-200 sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700`} | ||
| aria-label="Sidebar" | ||
| > | ||
| <div className="h-full px-3 pb-4 overflow-y-auto bg-white dark:bg-gray-800"> | ||
| <ul className="space-y-2 font-medium"> | ||
|
|
||
| <li> | ||
| <button onClick={()=>{HandleContent("/")}} className=" bg-gradient-to-t from-green-500 via-blue-200 to-purple-100 bg-clip-text tracking-wider font-bold text-transparent text-center my-1 w-full flex items-center p-2 hover:bg-gray-100 dark:hover:bg-gray-700 group"> | ||
| <span className="px-1 whitespace-nowrap">Home</span> | ||
| </button> | ||
| </li> | ||
| <li> | ||
| <button onClick={()=>{HandleContent('/button')}} className=" bg-gradient-to-t from-green-500 via-blue-200 to-purple-100 bg-clip-text tracking-wider font-bold text-transparent text-center my-1 w-full flex items-center p-2 hover:bg-gray-100 dark:hover:bg-gray-700 group"> | ||
| <span className="px-1 whitespace-nowrap">Button</span> | ||
| </button> | ||
| </li> | ||
| <li> | ||
| <button onClick={()=>{HandleContent('/Modal')}} className="bg-gradient-to-t from-green-200 via-blue-200 to-purple-100 bg-clip-text tracking-wider font-bold text-transparent text-center my-1 w-full flex items-center p-2 hover:bg-gray-100 dark:hover:bg-gray-700 group"> | ||
| <span className="px-1 whitespace-nowrap"> Modal</span> | ||
| </button> | ||
| </li>{" "} | ||
| <li> | ||
| <button onClick={()=>{HandleContent('Footer')}} className="bg-gradient-to-t from-green-200 via-blue-200 to-purple-100 bg-clip-text tracking-wider font-bold text-transparent text-center my-1 w-full flex items-center p-2 hover:bg-gray-100 dark:hover:bg-gray-700 group"> | ||
| <span className="px-1 whitespace-nowrap">Footer</span> | ||
| </button> | ||
| </li>{" "} | ||
| <li> | ||
| <button onClick={()=>{HandleContent('/avatar')}} className="bg-gradient-to-t from-green-200 via-blue-200 to-purple-100 bg-clip-text tracking-wider font-bold text-transparent text-center my-1 w-full flex items-center p-2 hover:bg-gray-100 dark:hover:bg-gray-700 group"> | ||
| <span className="px-1 whitespace-nowrap">Avatar</span> | ||
| </button> | ||
| </li>{" "} | ||
|
|
||
| <li> | ||
| <button onClick={()=>{HandleContent('card')}} className="bg-gradient-to-t from-green-200 via-blue-200 to-purple-100 bg-clip-text tracking-wider font-bold text-transparent text-center my-1 w-full flex items-center p-2 hover:bg-gray-100 dark:hover:bg-gray-700 group"> | ||
| <span className="px-1 whitespace-nowrap">Card</span> | ||
| </button> | ||
| </li> | ||
| <li> | ||
| <button onClick={()=>{HandleContent('/alert')}} className="bg-gradient-to-t from-green-200 via-blue-200 to-purple-100 bg-clip-text tracking-wider font-bold text-transparent text-center my-1 w-full flex items-center p-2 hover:bg-gray-100 dark:hover:bg-gray-700 group"> | ||
| <span className="px-1 whitespace-nowrap">Alert</span> | ||
| </button> | ||
| </li> | ||
| <li> | ||
|
|
||
| <button onClick={()=>{HandleContent('/badge')}} className="bg-gradient-to-t from-green-200 via-blue-200 to-purple-100 bg-clip-text tracking-wider font-bold text-transparent text-center my-1 w-full flex items-center p-2 hover:bg-gray-100 dark:hover:bg-gray-700 group"> | ||
| <span className="px-1 whitespace-nowrap">Badge</span> | ||
| </button> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </aside> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Sidebar; | ||
|
|
||
|
|
Empty file.
Oops, something went wrong.