aljaz/landscape-template
1
0
Fork 0
mirror of https://github.com/aljazceru/landscape-template.git synced 2026-02-01 20:54:25 +01:00
Code Issues Packages Projects Releases Wiki Activity

update: navbar

Browse Source
This commit is contained in:
MTG2000
2022-10-06 15:37:32 +03:00
parent 6a34225a1c
commit becf75d9e4
7 changed files with 9 additions and 292 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/Components/DynamicIcon/DynamicIcon.tsx
View File

@@ -1,40 +0,0 @@
import React, { CSSProperties, SVGAttributes } from "react";
import { IconContext } from "react-icons";
import loadable from "@loadable/component";
interface IProps {
icon: string;
color?: string;
size?: string;
className?: string;
style?: CSSProperties;
attr?: SVGAttributes<SVGElement>;
}
const DynamicIcon: React.FC<IProps> = ({ ...props }) => {
// const [library, iconComponent] = props.icon.split("/");
// if (!library || !iconComponent) return <div>Could Not Find Icon</div>;
// const lib = library.toLowerCase();
const Icon = loadable(() => import("react-icons/hi/index.js"), {
resolveComponent: (el: JSX.Element) =>
el[props.icon as keyof JSX.Element]
});
const value: IconContext = {
color: props.color,
size: props.size,
className: props.className,
style: props.style,
attr: props.attr
};
return (
<IconContext.Provider value={value}>
<Icon />
</IconContext.Provider>
);
};
export default DynamicIcon;

97
src/Components/Navbar/NavDesktop.tsx
View File

@@ -44,102 +44,7 @@ export default function NavDesktop() {
<img className='h-40' src={ASSETS.Logo} alt="Bolt fun logo" />
</h2>
</Link>
<ul className="flex gap-32 xl:gap-64">
<li className="relative">
<Link to={'/projects'} className='text-body4 font-bold hover:text-primary-600'>
Projects
</Link>
</li>
<li className="relative">
<Link to={'/hackathons'} className='text-body4 font-bold hover:text-primary-600'>
Events
</Link>
</li>
{/* <li>
<Menu
offsetY={28}
menuButton={
<MenuButton
className='text-body4 font-bold hover:text-primary-600'>Community <FiChevronDown className="ml-8" />
</MenuButton>
}
menuClassName='!rounded-12 !p-8 !border-gray-200'
menuStyle={{ border: '1px solid' }}
>
<MenuItem
href={PAGES_ROUTES.blog.feed}
onClick={(e) => {
e.syntheticEvent.preventDefault();
navigate(PAGES_ROUTES.blog.feed);
}}
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12 '
>
<div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
<span className="text-body2">✍🏼</span>
</div>
<div>
<p className="text-body4 text-black font-medium">
Stories
</p>
<p className="text-body5 text-gray-600 mt-4">
Tales from the maker community
</p>
</div>
</MenuItem>
<MenuItem
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12 opacity-40'
>
<div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
<span className="text-body2">💬</span>
</div>
<div>
<p className="text-body4 text-black font-medium">
Discussions
</p>
<p className="text-body5 text-gray-600 mt-4">
Coming soon
</p>
</div>
</MenuItem>
<MenuItem
href="/hackathons"
onClick={(e) => {
e.syntheticEvent.preventDefault();
navigate("/hackathons");
}}
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
>
<div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
<span className="text-body2">🏆</span>
</div>
<div>
<p className="text-body4 text-black font-medium">
Hackathons
</p>
<p className="text-body5 text-gray-600 mt-4">
Take part in hackathons & tournaments
</p>
</div>
</MenuItem>
</Menu>
</li> */}
<li className="relative">
<a
href={'https://bolt.fun/guide/'}
target="_blank"
rel="noreferrer"
className='text-body4 font-bold hover:text-primary-600'
>
Guide
</a>
</li>
<li className="relative">
<Link to={'/donate'} className='text-body4 font-bold hover:text-primary-600'>
Donate
</Link>
</li>
</ul>
<ul className="flex gap-32 xl:gap-64"></ul>
<div className="flex-1"></div>

119
src/Components/Navbar/NavMobile.tsx
View File

@@ -155,124 +155,7 @@ export default function NavMobile() {
<div className="flex flex-col gap-16 py-16">
{/* <Search onResultClick={() => toggleDrawerOpen(false)} /> */}
</div>
<ul className="flex flex-col py-16 gap-32 border-t">
<li className="relative">
<Link
to={'/projects'}
onClick={() => toggleDrawerOpen(false)}
className='text-body4 font-bold hover:text-primary-600'>
Projects
</Link>
</li>
<li className="relative">
<Link
to={'/hackathons'}
onClick={() => toggleDrawerOpen(false)}
className='text-body4 font-bold hover:text-primary-600'>
Events
</Link>
</li>
{/* <li>
<button
className='text-body4 font-bold hover:text-primary-600 w-full flex justify-between'
onClick={() => toggleCommunityOpen()}
>Community
<motion.span
variants={listArrowVariants}
initial={'closed'}
animate={communityOpen ? 'open' : 'closed'}
className="ml-auto">
<BsChevronDown className=" text-gray-400" />
</motion.span>
</button>
{<motion.div
variants={categoriesListVariants}
initial={'closed'}
animate={communityOpen ? 'open' : 'closed'}
>
<div className='flex flex-col gap-24 pt-16' >
<Link
to={PAGES_ROUTES.blog.feed}
onClick={() => toggleDrawerOpen(false)}
className='font-medium flex gap-16 !rounded-12 '
>
<div className="shrink-0 bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
<span className="text-body2 shrink-0">✍🏼</span>
</div>
<div>
<p className="text-body4 text-black font-medium">
Stories
</p>
<p className="text-body5 font-normal text-gray-600 mt-4">
Tales from the maker community
</p>
</div>
</Link>
<div
className='font-medium flex gap-16 !rounded-12 opacity-60'
>
<div className="shrink-0 bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
<span className="text-body2 shrink-0">💬</span>
</div>
<div>
<p className="text-body4 text-black font-medium">
Discussions
</p>
<p className="text-body5 font-normal text-gray-600 mt-4">
Coming soon
</p>
</div>
</div>
<Link
to="/hackathons"
onClick={() => toggleDrawerOpen(false)}
className='font-medium flex gap-16 !rounded-12'
>
<div className="shrink-0 bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
<span className="text-body2 shrink-0">🏆</span>
</div>
<div>
<p className="text-body4 text-black font-medium">
Hackathons
</p>
<p className="text-body5 font-normal text-gray-600 mt-4">
Take part in hackathons & tournaments
</p>
</div>
</Link>
</div>
</motion.div>}
</li> */}
<li className="relative">
<a
href={'https://bolt.fun/guide/'}
target="_blank"
rel="noreferrer"
className='text-body4 font-bold hover:text-primary-600'
>
Guide
</a>
</li>
<li className="relative">
<Link
to={'/donate'}
onClick={() => toggleDrawerOpen(false)}
className='text-body4 font-bold hover:text-primary-600'>
Donate
</Link>
</li>
{curUser &&
<li className="relative">
<Link
to={'/logout'}
onClick={() => toggleDrawerOpen(false)}
className='text-body4 font-bold hover:text-primary-600'>
Logout 👋
</Link>
</li>}
</ul>
<ul className="flex flex-col py-16 gap-32 border-t"></ul>
<ul className="px-16 py-16 pb-32 flex flex-wrap gap-y-12 border-t pt-32 mt-auto">
<li className="text-body4 text-gray-500 hover:text-gray-700 w-1/2">
<a href="/#">About Us</a>

34
src/Components/Navbar/Navbar.tsx
View File

@@ -9,33 +9,7 @@ import { MEDIA_QUERIES } from "src/utils/theme/media_queries";
import { IoMdTrophy } from "react-icons/io";
export const navLinks = [
{ text: "Explore", url: "/", icon: MdHomeFilled, color: "text-primary-600" },
{
text: "Blog",
url: "/blog",
icon: MdComment,
color: "text-primary-600",
},
{
text: "Hackathons",
url: "/hackathons",
icon: IoMdTrophy,
color: "text-primary-600",
},
{
text: "Hottest",
url: "/hottest",
icon: MdLocalFireDepartment,
color: "text-primary-600",
},
// {
// text: "Categories",
// url: "/categories",
// icon: IoExtensionPuzzle,
// color: "text-primary-600",
// },
];
export const navLinks = [];
export default function Navbar() {
@@ -65,11 +39,7 @@ export default function Navbar() {
return (
<div className="sticky top-0 left-0 w-full z-[2010]">
{(isLargeScreen) ?
<NavDesktop />
:
<NavMobile />
}
<NavDesktop />
</div>
);
}

2
src/features/Projects/Components/Categories/Categories.stories.tsx
View File

@@ -9,7 +9,7 @@ export default {
} as ComponentMeta<typeof Categories>;
const Template: ComponentStory<typeof Categories> = (args) => <Categories />;
const Template: ComponentStory<typeof Categories> = (args) => <Categories {...args} />;
export const Default = Template.bind({});

1
src/features/Projects/Components/Categories/Categories.tsx
View File

@@ -3,7 +3,6 @@ import { useNavigate } from 'react-router-dom';
import { CategoryList, useAllCategoriesQuery } from 'src/graphql';
import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
import { useCarousel } from 'src/utils/hooks';
import DynamicIcon from 'src/Components/DynamicIcon/DynamicIcon';
import Skeleton from 'react-loading-skeleton';
const colors = [

8
src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx
View File

@@ -100,11 +100,11 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
url: project.twitter
},
{
value: project.github,
text: project.github,
value: project.repository,
text: project.repository,
icon: FiGithub,
colors: "bg-pink-100 text-pink-600",
url: project.github
url: project.repository
},
];
@@ -149,7 +149,7 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
<a href={project.website} target='_blank' rel="noreferrer"><h3 className="text-body1 font-bold">{project.title}</h3></a>
<p className="text-body4 text-gray-600">{project.tagline}</p>
<div>
<span className="font-medium text-body4 text-gray-600">{project.category.icon} {project.category.title}</span>
<span className="font-medium text-body4 text-gray-600">{project.category} {project.category.title}</span>
</div>
</div>
<div className="flex-shrink-0 w-full md:w-auto md:flex ml-auto gap-16 self-stretch">