mirror of
https://github.com/aljazceru/landscape-template.git
synced 2026-01-16 12:54:21 +01:00
fix: fixing some QA issues
- change rows shown on products page & change the api - restyle sort by - rebuild navigation menus - fix issues with donation stats & donate card - update products header link & date of hackathon
This commit is contained in:
@@ -35,11 +35,20 @@ type Props<T extends object | string> = {
|
||||
|
||||
|
||||
const colourStyles: StylesConfig = {
|
||||
control: (styles, state) => ({
|
||||
...styles,
|
||||
padding: '9px 16px',
|
||||
borderRadius: 12,
|
||||
}),
|
||||
indicatorSeparator: (styles, state) => ({
|
||||
...styles,
|
||||
display: "none"
|
||||
}),
|
||||
input: (styles, state) => ({
|
||||
...styles,
|
||||
" input": {
|
||||
boxShadow: 'none !important'
|
||||
}
|
||||
},
|
||||
}),
|
||||
};
|
||||
|
||||
@@ -78,6 +87,7 @@ export default function AutoComplete<T extends object>({
|
||||
onChange={v => onChange?.(v as any)}
|
||||
onBlur={onBlur}
|
||||
|
||||
|
||||
styles={colourStyles}
|
||||
theme={(theme) => ({
|
||||
...theme,
|
||||
|
||||
@@ -22,7 +22,7 @@ import {
|
||||
SubMenu
|
||||
} from '@szhsin/react-menu';
|
||||
import '@szhsin/react-menu/dist/index.css';
|
||||
import { FiChevronDown, FiSend } from "react-icons/fi";
|
||||
import { FiAward, FiChevronDown, FiFeather, FiMic, FiSend } from "react-icons/fi";
|
||||
import { MdComment, MdOutlineExplore, MdOutlineLocalFireDepartment } from "react-icons/md";
|
||||
import { IoMdTrophy } from "react-icons/io";
|
||||
import { BiCoinStack } from "react-icons/bi";
|
||||
@@ -57,55 +57,48 @@ export default function NavDesktop() {
|
||||
</h2>
|
||||
</a>
|
||||
<ul className="flex gap-32 xl:gap-64">
|
||||
<li>
|
||||
<Menu offsetY={24} menuClassName='!rounded-12' menuButton={<MenuButton className='text-body4 font-bold hover:text-primary-600'>LApps <FiChevronDown className="ml-8" /></MenuButton>}>
|
||||
<MenuItem
|
||||
href="/products"
|
||||
onClick={(e) => {
|
||||
e.syntheticEvent.preventDefault();
|
||||
navigate("/products");
|
||||
}}
|
||||
className='!px-24 !py-16 font-medium'
|
||||
>
|
||||
<MdOutlineExplore className={`text-body1 inline-block mr-12 text-primary-600 `} /> Explore
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
href="/products/hottest"
|
||||
onClick={(e) => {
|
||||
e.syntheticEvent.preventDefault();
|
||||
navigate("/products/hottest");
|
||||
}}
|
||||
className='!px-24 !py-16 font-medium'
|
||||
>
|
||||
<MdOutlineLocalFireDepartment className={`text-body1 inline-block mr-12 text-primary-600 `} /> Hottest
|
||||
</MenuItem>
|
||||
<SubMenu
|
||||
overflow="auto"
|
||||
itemProps={{ className: '!p-0' }}
|
||||
label={<div className='!px-24 !py-16 font-medium'><IoExtensionPuzzle className={`text-body1 inline-block mr-12 text-primary-600 `} /> Categories</div>}
|
||||
>
|
||||
<CategoriesList />
|
||||
</SubMenu>
|
||||
<MenuItem
|
||||
href="https://airtable.com/shr2VkxarNsIFilDz"
|
||||
target="_blank" rel="noopener noreferrer"
|
||||
className='!px-24 !py-16 font-medium'
|
||||
>
|
||||
<FiSend className={`text-body1 inline-block mr-12 text-primary-600 `} /> Submit LApp
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
<li className="relative">
|
||||
<Link to={'/products'} className='text-body4 font-bold hover:text-primary-600'>
|
||||
Products
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Menu offsetY={24} menuClassName='!rounded-12' menuButton={<MenuButton className='text-body4 font-bold hover:text-primary-600'>Community <FiChevronDown className="ml-8" /></MenuButton>}>
|
||||
<Menu offsetY={28} menuClassName='!rounded-12 !p-8 !border-gray-200' menuStyle={{ border: '1px solid' }} menuButton={<MenuButton className='text-body4 font-bold hover:text-primary-600'>Community <FiChevronDown className="ml-8" /></MenuButton>}>
|
||||
<MenuItem
|
||||
href="/blog"
|
||||
onClick={(e) => {
|
||||
e.syntheticEvent.preventDefault();
|
||||
navigate("/blog");
|
||||
}}
|
||||
className='!px-24 !py-16 font-medium'
|
||||
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12 '
|
||||
>
|
||||
<MdComment className={`text-body1 inline-block mr-12 text-primary-600 `} /> Stories
|
||||
<div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
|
||||
<FiFeather className={`text-body1 inline-block text-primary-600 `} />
|
||||
</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-60'
|
||||
>
|
||||
<div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
|
||||
<FiMic className={`text-body1 inline-block text-primary-600 `} />
|
||||
</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"
|
||||
@@ -113,9 +106,19 @@ export default function NavDesktop() {
|
||||
e.syntheticEvent.preventDefault();
|
||||
navigate("/hackathons");
|
||||
}}
|
||||
className='!px-24 !py-16 font-medium'
|
||||
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
|
||||
>
|
||||
<IoMdTrophy className={`text-body1 inline-block mr-12 text-primary-600 `} /> Hackathons
|
||||
<div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
|
||||
<FiAward className={`text-body1 inline-block text-primary-600 `} />
|
||||
</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>
|
||||
|
||||
@@ -8,17 +8,12 @@ import Search from "./Search/Search";
|
||||
import IconButton from "../IconButton/IconButton";
|
||||
import { useAppDispatch, useAppSelector } from "src/utils/hooks";
|
||||
import { toggleSearch } from "src/redux/features/ui.slice";
|
||||
import { FiChevronDown, FiMenu, FiSend } from "react-icons/fi";
|
||||
import { navLinks } from "./Navbar";
|
||||
import { FiAward, FiChevronDown, FiFeather, FiMenu, FiMic, } from "react-icons/fi";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { IoExtensionPuzzle } from "react-icons/io5";
|
||||
import CategoriesList from "./CategoriesList/CategoriesList";
|
||||
import { useToggle } from "@react-hookz/web";
|
||||
import styles from './styles.module.css'
|
||||
import { Menu, MenuButton, MenuItem, SubMenu } from "@szhsin/react-menu";
|
||||
import { Menu, MenuButton, MenuItem, } from "@szhsin/react-menu";
|
||||
import '@szhsin/react-menu/dist/index.css';
|
||||
import { IoMdTrophy } from "react-icons/io";
|
||||
import { MdComment, MdOutlineExplore, MdOutlineLocalFireDepartment } from "react-icons/md";
|
||||
|
||||
interface Props {
|
||||
}
|
||||
@@ -54,7 +49,7 @@ const categoriesListVariants = {
|
||||
}
|
||||
}
|
||||
|
||||
const categoriesArrowVariants = {
|
||||
const listArrowVariants = {
|
||||
open: { rotate: 180 },
|
||||
closed: { rotate: 0 }
|
||||
}
|
||||
@@ -62,14 +57,13 @@ const categoriesArrowVariants = {
|
||||
|
||||
export default function NavMobile({ }: Props) {
|
||||
const dispatch = useAppDispatch();
|
||||
const navigate = useNavigate()
|
||||
const { searchOpen } = useAppSelector((state) => ({
|
||||
isWalletConnected: state.wallet.isConnected,
|
||||
searchOpen: state.ui.isSearchOpen
|
||||
}));
|
||||
|
||||
const [drawerOpen, toggleDrawerOpen] = useToggle(false);
|
||||
const [categoriesOpen, toggleCategories] = useToggle(false)
|
||||
const [communityOpen, toggleCommunityOpen] = useToggle(false)
|
||||
|
||||
|
||||
|
||||
@@ -160,68 +154,85 @@ export default function NavMobile({ }: Props) {
|
||||
{/* {navLinks.map((link, idx) => <li key={idx} className="text-body3 p-16 active:bg-gray-200">
|
||||
<Link to={link.url} onClick={() => toggleDrawerOpen(false)}><link.icon className={`text-body2 inline-block mr-12 text-primary-600`} /> <span className="align-middle">{link.text}</span> </Link></li>
|
||||
)} */}
|
||||
<li>
|
||||
<Menu offsetY={24} menuClassName='!rounded-12' menuButton={<MenuButton className='text-body4 font-bold hover:text-primary-600'>LApps <FiChevronDown className="ml-8" /></MenuButton>}>
|
||||
<MenuItem
|
||||
href="/products"
|
||||
onClick={(e) => {
|
||||
e.syntheticEvent.preventDefault();
|
||||
navigate("/products");
|
||||
}}
|
||||
className='!px-24 !py-16 font-medium'
|
||||
>
|
||||
<MdOutlineExplore className={`text-body1 inline-block mr-12 text-primary-600 `} /> Explore
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
href="/products/hottest"
|
||||
onClick={(e) => {
|
||||
e.syntheticEvent.preventDefault();
|
||||
navigate("/products/hottest");
|
||||
}}
|
||||
className='!px-24 !py-16 font-medium'
|
||||
>
|
||||
<MdOutlineLocalFireDepartment className={`text-body1 inline-block mr-12 text-primary-600 `} /> Hottest
|
||||
</MenuItem>
|
||||
<SubMenu
|
||||
itemProps={{ className: '!p-0' }}
|
||||
direction='bottom'
|
||||
overflow="auto"
|
||||
label={<div className='!px-24 !py-16 font-medium'><IoExtensionPuzzle className={`text-body1 inline-block mr-12 text-primary-600 `} /> Categories</div>}
|
||||
>
|
||||
<CategoriesList />
|
||||
</SubMenu>
|
||||
<MenuItem
|
||||
href="https://airtable.com/shr2VkxarNsIFilDz"
|
||||
target="_blank" rel="noopener noreferrer"
|
||||
className='!px-24 !py-16 font-medium'
|
||||
>
|
||||
<FiSend className={`text-body1 inline-block mr-12 text-primary-600 `} /> Submit LApp
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
<li className="relative">
|
||||
<Link
|
||||
to={'/products'}
|
||||
onClick={() => toggleDrawerOpen(false)}
|
||||
className='text-body4 font-bold hover:text-primary-600'>
|
||||
Products
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Menu offsetY={24} menuClassName='!rounded-12' menuButton={<MenuButton className='text-body4 font-bold hover:text-primary-600'>Community <FiChevronDown className="ml-8" /></MenuButton>}>
|
||||
<MenuItem
|
||||
href="/blog"
|
||||
onClick={(e) => {
|
||||
e.syntheticEvent.preventDefault();
|
||||
navigate("/blog");
|
||||
}}
|
||||
className='!px-24 !py-16 font-medium'
|
||||
>
|
||||
<MdComment className={`text-body1 inline-block mr-12 text-primary-600 `} /> Stories
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
href="/hackathons"
|
||||
onClick={(e) => {
|
||||
e.syntheticEvent.preventDefault();
|
||||
navigate("/hackathons");
|
||||
}}
|
||||
className='!px-24 !py-16 font-medium'
|
||||
>
|
||||
<IoMdTrophy className={`text-body1 inline-block mr-12 text-primary-600 `} /> Hackathons
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
<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="/blog"
|
||||
onClick={() => toggleDrawerOpen(false)}
|
||||
className='font-medium flex gap-16 !rounded-12 '
|
||||
>
|
||||
<div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
|
||||
<FiFeather className={`text-body1 inline-block text-primary-600 `} />
|
||||
</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>
|
||||
<p
|
||||
|
||||
className='font-medium flex gap-16 !rounded-12 opacity-60'
|
||||
>
|
||||
<div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
|
||||
<FiMic className={`text-body1 inline-block text-primary-600 `} />
|
||||
</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>
|
||||
</p>
|
||||
<Link
|
||||
to="/hackathons"
|
||||
onClick={() => toggleDrawerOpen(false)}
|
||||
className='font-medium flex gap-16 !rounded-12'
|
||||
>
|
||||
<div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
|
||||
<FiAward className={`text-body1 inline-block text-primary-600 `} />
|
||||
</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
|
||||
@@ -234,7 +245,10 @@ export default function NavMobile({ }: Props) {
|
||||
</a>
|
||||
</li>
|
||||
<li className="relative">
|
||||
<Link to={'/donate'} className='text-body4 font-bold hover:text-primary-600'>
|
||||
<Link
|
||||
to={'/donate'}
|
||||
onClick={() => toggleDrawerOpen(false)}
|
||||
className='text-body4 font-bold hover:text-primary-600'>
|
||||
Donate
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
@@ -59,7 +59,7 @@ export default function DonateCard() {
|
||||
autoFocus
|
||||
/>
|
||||
<p className='px-16 shrink-0 self-center text-primary-400'>
|
||||
Sats
|
||||
sats
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex mt-16 justify-between">
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { BiCoinStack } from "react-icons/bi";
|
||||
import { FiGrid } from "react-icons/fi";
|
||||
import { FiAward, FiGrid } from "react-icons/fi";
|
||||
import { IoMedalOutline, IoRocketOutline } from "react-icons/io5";
|
||||
import { useDonationsStatsQuery } from "src/graphql";
|
||||
import { generateList, numberFormatter } from "src/utils/helperFunctions";
|
||||
@@ -14,7 +14,7 @@ export default function DonationStats() {
|
||||
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-16">
|
||||
<div className="grid sm:grid-cols-2 md:grid-cols-4 gap-16">
|
||||
|
||||
{donationsStatQuery.loading && generateList(<StatCardSkeleton />, 4)}
|
||||
|
||||
@@ -32,7 +32,7 @@ export default function DonationStats() {
|
||||
/>
|
||||
<StatCard
|
||||
color="#22C55E"
|
||||
label={<><IoMedalOutline className='w-full lg:w-auto scale-125 mr-8' /> <span className="align-middle">Prizes</span></>}
|
||||
label={<><FiAward className='w-full lg:w-auto scale-125 mr-8' /> <span className="align-middle">Prizes</span></>}
|
||||
value={donationsStatQuery.data?.getDonationsStats.prizes}
|
||||
/>
|
||||
<StatCard
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useMediaQuery } from '@react-hookz/web';
|
||||
import React, { useState } from 'react'
|
||||
import AutoComplete from 'src/Components/Inputs/Autocomplete/Autocomplete';
|
||||
import { useMediaQuery } from 'src/utils/hooks';
|
||||
import { MEDIA_QUERIES } from 'src/utils/theme';
|
||||
|
||||
const filters = [
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useMediaQuery } from '@react-hookz/web';
|
||||
import { useMediaQuery } from 'src/utils/hooks';
|
||||
import React, { useState } from 'react'
|
||||
import Skeleton from 'react-loading-skeleton';
|
||||
import Slider from 'src/Components/Slider/Slider';
|
||||
@@ -27,9 +27,9 @@ export default function PopularTopicsFilter({ filterChanged }: Props) {
|
||||
const isMdScreen = useMediaQuery(MEDIA_QUERIES.isMedium)
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='overflow-hidden'>
|
||||
{isMdScreen ?
|
||||
<div className='bg-white border-2 rounded-12 p-16'>
|
||||
<div className='bg-white border-2 rounded-12 p-16 overflow-hidden'>
|
||||
<p className="text-body2 font-bolder text-black mb-16">Topics</p>
|
||||
<ul className=' flex flex-col gap-16'>
|
||||
{topicsQuery.loading ?
|
||||
@@ -75,7 +75,7 @@ export default function PopularTopicsFilter({ filterChanged }: Props) {
|
||||
}
|
||||
</>
|
||||
}
|
||||
</>
|
||||
</div>
|
||||
|
||||
|
||||
)
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useMediaQuery } from '@react-hookz/web';
|
||||
import { useMediaQuery } from 'src/utils/hooks';
|
||||
import React, { useState } from 'react'
|
||||
import Skeleton from 'react-loading-skeleton';
|
||||
import Slider from 'src/Components/Slider/Slider';
|
||||
@@ -26,7 +26,7 @@ export default function PopularTopicsFilter({ filterChanged }: Props) {
|
||||
const isMdScreen = useMediaQuery(MEDIA_QUERIES.isMedium)
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='overflow-hidden'>
|
||||
{isMdScreen ?
|
||||
<div className='bg-white border-2 rounded-12 p-16'>
|
||||
<p className="text-body2 font-bolder text-black mb-16">Topics</p>
|
||||
@@ -74,7 +74,7 @@ export default function PopularTopicsFilter({ filterChanged }: Props) {
|
||||
}
|
||||
</>
|
||||
}
|
||||
</>
|
||||
</div>
|
||||
|
||||
|
||||
)
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useMediaQuery } from '@react-hookz/web';
|
||||
import { useMediaQuery } from 'src/utils/hooks';
|
||||
import React, { useState } from 'react'
|
||||
import { Nullable } from 'remirror';
|
||||
import AutoComplete from 'src/Components/Inputs/Autocomplete/Autocomplete';
|
||||
|
||||
@@ -11,7 +11,7 @@ export default function ProjectCardMini({ project, onClick }: Props) {
|
||||
|
||||
return (
|
||||
<div
|
||||
className="bg-gray-25 select-none px-16 py-16 flex min-w-[296px] gap-16 border border-gray-200 rounded-10 hover:cursor-pointer hover:bg-gray-100"
|
||||
className="bg-gray-25 select-none px-16 py-16 flex min-w-[296px] gap-16 border-2 border-gray-200 rounded-10 hover:cursor-pointer hover:bg-gray-100"
|
||||
onClick={() => onClick(project.id)}
|
||||
onKeyDown={e => e.key !== 'Enter' || onClick(project.id)}
|
||||
tabIndex={0}
|
||||
|
||||
@@ -18,11 +18,11 @@ const headerLinks = [
|
||||
},
|
||||
{
|
||||
title:
|
||||
"Want to learn to build lightning applications? Join Shock the Web hackathon on March 22 - 28",
|
||||
"Shock the web is back !! Join us from 16 to 19 June.",
|
||||
img: Assets.Images_ExploreHeader2,
|
||||
link: {
|
||||
content: "Register Now",
|
||||
url: "https://bolt.fun/hackathons/shock-the-web/",
|
||||
url: "https://bolt.fun/hackathons/shock-the-web-2/",
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
@@ -20,14 +20,13 @@ Hottest.args = {
|
||||
<MdLocalFireDepartment
|
||||
className='inline-block text-fire align-bottom scale-125 ml-4 origin-bottom'
|
||||
/></>,
|
||||
categoryId: 0,
|
||||
projects: MOCK_DATA.projects
|
||||
}
|
||||
|
||||
export const Defi = Template.bind({});
|
||||
Defi.args = {
|
||||
title: 'DeFi',
|
||||
categoryId: 8,
|
||||
link: "category-page-url",
|
||||
projects: MOCK_DATA.projects
|
||||
}
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@ import ProjectCardMini from "src/features/Projects/Components/ProjectCardMini/Pr
|
||||
|
||||
interface Props {
|
||||
title: string | ReactNode,
|
||||
categoryId: number,
|
||||
link?: string;
|
||||
projects: ProjectCard[]
|
||||
}
|
||||
|
||||
@@ -37,7 +37,7 @@ function calcNumItems() {
|
||||
|
||||
|
||||
|
||||
export default function ProjectsRow({ title, categoryId, projects }: Props) {
|
||||
export default function ProjectsRow({ title, link, projects }: Props) {
|
||||
|
||||
const [carouselItmsCnt, setCarouselItmsCnt] = useState(calcNumItems);
|
||||
const dispatch = useAppDispatch()
|
||||
@@ -85,7 +85,7 @@ export default function ProjectsRow({ title, categoryId, projects }: Props) {
|
||||
<div className='mb-48'>
|
||||
<h3 className="font-bolder text-body3 mb-24">
|
||||
<span className="align-middle">{title}</span>
|
||||
{categoryId > 0 && <Link to={`/category/${categoryId}`}>
|
||||
{link && <Link to={link}>
|
||||
<MdDoubleArrow className='text-gray-200 ml-8 hover:cursor-pointer transform scale-y-110 scale-x-125 origin-left' />
|
||||
</Link>}
|
||||
</h3>
|
||||
|
||||
@@ -19,17 +19,21 @@ export default function ProjectsSection() {
|
||||
|
||||
return (
|
||||
<div className='mt-32 lg:mt-48'>
|
||||
<ProjectsRow title={shockTheWebCategory?.title}
|
||||
categoryId={shockTheWebCategory?.id!}
|
||||
projects={shockTheWebCategory?.project!} />
|
||||
<ProjectsRow title={<><span className="align-middle mr-8">Newest</span> <MdLocalFireDepartment className='inline-block text-fire scale-125 ' /></>}
|
||||
categoryId={0}
|
||||
<ProjectsRow title={<><span className="align-middle mr-8">Hottest</span> <MdLocalFireDepartment className='inline-block text-fire scale-125 ' /></>}
|
||||
link='/products/hottest'
|
||||
projects={data.hottestProjects} />
|
||||
|
||||
<ProjectsRow title="Recently added"
|
||||
projects={data.newProjects} />
|
||||
|
||||
<ProjectsRow title={shockTheWebCategory?.title}
|
||||
link={`/products/category/${shockTheWebCategory?.id}`}
|
||||
projects={shockTheWebCategory?.project!} />
|
||||
{restCategories.map(({ id, title, project, }) => {
|
||||
if (project)
|
||||
return <ProjectsRow
|
||||
key={id}
|
||||
categoryId={id}
|
||||
link={`/products/category/${id}`}
|
||||
title={title}
|
||||
projects={project} />
|
||||
else return null
|
||||
|
||||
@@ -1,4 +1,26 @@
|
||||
query ExploreProjects {
|
||||
hottestProjects(take: 10, skip: 0) {
|
||||
id
|
||||
title
|
||||
thumbnail_image
|
||||
votes_count
|
||||
category {
|
||||
title
|
||||
id
|
||||
}
|
||||
}
|
||||
|
||||
newProjects {
|
||||
id
|
||||
title
|
||||
thumbnail_image
|
||||
votes_count
|
||||
category {
|
||||
title
|
||||
id
|
||||
}
|
||||
}
|
||||
|
||||
allCategories {
|
||||
id
|
||||
title
|
||||
@@ -13,14 +35,4 @@ query ExploreProjects {
|
||||
}
|
||||
}
|
||||
}
|
||||
newProjects {
|
||||
id
|
||||
title
|
||||
thumbnail_image
|
||||
votes_count
|
||||
category {
|
||||
title
|
||||
id
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -426,7 +426,7 @@ export type AllCategoriesQuery = { __typename?: 'Query', allCategories: Array<{
|
||||
export type ExploreProjectsQueryVariables = Exact<{ [key: string]: never; }>;
|
||||
|
||||
|
||||
export type ExploreProjectsQuery = { __typename?: 'Query', allCategories: Array<{ __typename?: 'Category', id: number, title: string, project: Array<{ __typename?: 'Project', id: number, thumbnail_image: string, title: string, votes_count: number, category: { __typename?: 'Category', title: string, id: number } }> }>, newProjects: Array<{ __typename?: 'Project', id: number, title: string, thumbnail_image: string, votes_count: number, category: { __typename?: 'Category', title: string, id: number } }> };
|
||||
export type ExploreProjectsQuery = { __typename?: 'Query', hottestProjects: Array<{ __typename?: 'Project', id: number, title: string, thumbnail_image: string, votes_count: number, category: { __typename?: 'Category', title: string, id: number } }>, newProjects: Array<{ __typename?: 'Project', id: number, title: string, thumbnail_image: string, votes_count: number, category: { __typename?: 'Category', title: string, id: number } }>, allCategories: Array<{ __typename?: 'Category', id: number, title: string, project: Array<{ __typename?: 'Project', id: number, thumbnail_image: string, title: string, votes_count: number, category: { __typename?: 'Category', title: string, id: number } }> }> };
|
||||
|
||||
export type HottestProjectsQueryVariables = Exact<{ [key: string]: never; }>;
|
||||
|
||||
@@ -1139,6 +1139,26 @@ export type AllCategoriesLazyQueryHookResult = ReturnType<typeof useAllCategorie
|
||||
export type AllCategoriesQueryResult = Apollo.QueryResult<AllCategoriesQuery, AllCategoriesQueryVariables>;
|
||||
export const ExploreProjectsDocument = gql`
|
||||
query ExploreProjects {
|
||||
hottestProjects(take: 10, skip: 0) {
|
||||
id
|
||||
title
|
||||
thumbnail_image
|
||||
votes_count
|
||||
category {
|
||||
title
|
||||
id
|
||||
}
|
||||
}
|
||||
newProjects {
|
||||
id
|
||||
title
|
||||
thumbnail_image
|
||||
votes_count
|
||||
category {
|
||||
title
|
||||
id
|
||||
}
|
||||
}
|
||||
allCategories {
|
||||
id
|
||||
title
|
||||
@@ -1153,16 +1173,6 @@ export const ExploreProjectsDocument = gql`
|
||||
}
|
||||
}
|
||||
}
|
||||
newProjects {
|
||||
id
|
||||
title
|
||||
thumbnail_image
|
||||
votes_count
|
||||
category {
|
||||
title
|
||||
id
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@@ -58,7 +58,8 @@ export const handlers = [
|
||||
return res(
|
||||
ctx.data({
|
||||
allCategories: allCategories(),
|
||||
newProjects: newProjects()
|
||||
newProjects: newProjects(),
|
||||
hottestProjects: hottestProjects()
|
||||
})
|
||||
)
|
||||
}),
|
||||
|
||||
@@ -3,6 +3,7 @@ import { Query, QueryGetFeedArgs, QueryGetPostByIdArgs } from 'src/graphql'
|
||||
import { Chance } from "chance";
|
||||
import { topics } from "./data/topics";
|
||||
import { hackathons } from "./data/hackathon";
|
||||
import { shuffle } from "src/utils/helperFunctions";
|
||||
|
||||
const chance = new Chance()
|
||||
|
||||
@@ -28,7 +29,7 @@ export function allCategories() {
|
||||
}
|
||||
|
||||
export function newProjects() {
|
||||
return MOCK_DATA.projects;
|
||||
return shuffle(MOCK_DATA.projects).slice(0, 10);
|
||||
}
|
||||
|
||||
export function getProject(projectId: number) {
|
||||
|
||||
Reference in New Issue
Block a user