mirror of
https://github.com/aljazceru/landscape-template.git
synced 2026-01-10 18:04:22 +01:00
fixing Issue #1
This commit is contained in:
=Mtg_Dev
42
package-lock.json
generated
42
package-lock.json
generated
@@ -17,6 +17,7 @@
|
||||
"@types/react": "^17.0.33",
|
||||
"@types/react-dom": "^17.0.10",
|
||||
"framer-motion": "^5.3.0",
|
||||
"lodash.throttle": "^4.1.1",
|
||||
"react": "^17.0.2",
|
||||
"react-copy-to-clipboard": "^5.0.4",
|
||||
"react-dom": "^17.0.2",
|
||||
@@ -33,6 +34,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@craco/craco": "^6.4.0",
|
||||
"@types/lodash.throttle": "^4.1.6",
|
||||
"@types/react-copy-to-clipboard": "^5.0.2",
|
||||
"autoprefixer": "^9.8.8",
|
||||
"gh-pages": "^3.2.3",
|
||||
@@ -3608,6 +3610,21 @@
|
||||
"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
|
||||
"integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4="
|
||||
},
|
||||
"node_modules/@types/lodash": {
|
||||
"version": "4.14.177",
|
||||
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.177.tgz",
|
||||
"integrity": "sha512-0fDwydE2clKe9MNfvXHBHF9WEahRuj+msTuQqOmAApNORFvhMYZKNGGJdCzuhheVjMps/ti0Ak/iJPACMaevvw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/lodash.throttle": {
|
||||
"version": "4.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@types/lodash.throttle/-/lodash.throttle-4.1.6.tgz",
|
||||
"integrity": "sha512-/UIH96i/sIRYGC60NoY72jGkCJtFN5KVPhEMMMTjol65effe1gPn0tycJqV5tlSwMTzX8FqzB5yAj0rfGHTPNg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/lodash": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/minimatch": {
|
||||
"version": "3.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
|
||||
@@ -13401,6 +13418,11 @@
|
||||
"lodash._reinterpolate": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/lodash.throttle": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
|
||||
"integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
|
||||
},
|
||||
"node_modules/lodash.topath": {
|
||||
"version": "4.5.2",
|
||||
"resolved": "https://registry.npmjs.org/lodash.topath/-/lodash.topath-4.5.2.tgz",
|
||||
@@ -25126,6 +25148,21 @@
|
||||
"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
|
||||
"integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4="
|
||||
},
|
||||
"@types/lodash": {
|
||||
"version": "4.14.177",
|
||||
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.177.tgz",
|
||||
"integrity": "sha512-0fDwydE2clKe9MNfvXHBHF9WEahRuj+msTuQqOmAApNORFvhMYZKNGGJdCzuhheVjMps/ti0Ak/iJPACMaevvw==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/lodash.throttle": {
|
||||
"version": "4.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@types/lodash.throttle/-/lodash.throttle-4.1.6.tgz",
|
||||
"integrity": "sha512-/UIH96i/sIRYGC60NoY72jGkCJtFN5KVPhEMMMTjol65effe1gPn0tycJqV5tlSwMTzX8FqzB5yAj0rfGHTPNg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/lodash": "*"
|
||||
}
|
||||
},
|
||||
"@types/minimatch": {
|
||||
"version": "3.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
|
||||
@@ -32649,6 +32686,11 @@
|
||||
"lodash._reinterpolate": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"lodash.throttle": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
|
||||
"integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
|
||||
},
|
||||
"lodash.topath": {
|
||||
"version": "4.5.2",
|
||||
"resolved": "https://registry.npmjs.org/lodash.topath/-/lodash.topath-4.5.2.tgz",
|
||||
|
||||
@@ -13,6 +13,7 @@
|
||||
"@types/react": "^17.0.33",
|
||||
"@types/react-dom": "^17.0.10",
|
||||
"framer-motion": "^5.3.0",
|
||||
"lodash.throttle": "^4.1.1",
|
||||
"react": "^17.0.2",
|
||||
"react-copy-to-clipboard": "^5.0.4",
|
||||
"react-dom": "^17.0.2",
|
||||
@@ -56,6 +57,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@craco/craco": "^6.4.0",
|
||||
"@types/lodash.throttle": "^4.1.6",
|
||||
"@types/react-copy-to-clipboard": "^5.0.2",
|
||||
"autoprefixer": "^9.8.8",
|
||||
"gh-pages": "^3.2.3",
|
||||
|
||||
@@ -46,7 +46,7 @@ export default function Claim_CopySignatureCard({ onClose, direction, ...props }
|
||||
Good job! Now paste this on the webpage
|
||||
<a className="font-bold" href="www.projectname.com/"
|
||||
target='_blank' rel='noreferrer'
|
||||
>www.projectname.com/</a>
|
||||
> www.projectname.com/</a>
|
||||
</p>
|
||||
<div className="input-wrapper mt-32">
|
||||
<input
|
||||
|
||||
@@ -1,24 +1,33 @@
|
||||
import { ReactElement, useRef } from "react";
|
||||
import { ReactElement, useEffect, useRef, useState } from "react";
|
||||
import { ProjectCard } from "../../../utils/interfaces";
|
||||
import Carousel from 'react-multi-carousel';
|
||||
import { MdLocalFireDepartment } from 'react-icons/md';
|
||||
import { useAppDispatch } from "../../../utils/hooks";
|
||||
import { ModalId, openModal } from "../../../redux/features/modals.slice";
|
||||
import _throttle from 'lodash.throttle'
|
||||
|
||||
const responsive = {
|
||||
all: {
|
||||
breakpoint: { max: 5000, min: 0 },
|
||||
items: (((window.innerWidth - 64) / (296 + 24))),
|
||||
items: (((window.innerWidth - 64) / (296 + 48))),
|
||||
}
|
||||
}
|
||||
|
||||
const calcNumItems = () => {
|
||||
const res = (((window.innerWidth - 32 - 296) / (296 + 20)));
|
||||
console.log(res);
|
||||
|
||||
return res;
|
||||
}
|
||||
|
||||
interface Props { title: string | ReactElement, projects: ProjectCard[] }
|
||||
|
||||
export default function ProjectsRow({ title, projects }: Props) {
|
||||
|
||||
const dispatch = useAppDispatch()
|
||||
const [carouselItmsCnt, setCarouselItmsCnt] = useState(calcNumItems);
|
||||
|
||||
responsive.all.items = carouselItmsCnt
|
||||
|
||||
let drag = useRef(false);
|
||||
|
||||
@@ -31,17 +40,28 @@ export default function ProjectsRow({ title, projects }: Props) {
|
||||
dispatch(openModal({ modalId: ModalId.Project, propsToPass: { projectId } }))
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const listener = _throttle(() => {
|
||||
setCarouselItmsCnt(calcNumItems());
|
||||
}, 1000);
|
||||
|
||||
window.addEventListener('resize', listener)
|
||||
return () => {
|
||||
window.removeEventListener('resize', listener)
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className='mb-40 overflow-hidden'>
|
||||
<h3 className="font-bolder text-body3 mb-20 px-32">{title}</h3>
|
||||
<div className='mb-48'>
|
||||
<h3 className="font-bolder text-body3 mb-24 px-32">{title}</h3>
|
||||
<Carousel
|
||||
containerClass='py-10 pl-32'
|
||||
containerClass='pl-32 pr-[-32px]'
|
||||
showDots={false}
|
||||
arrows={false}
|
||||
responsive={responsive}
|
||||
infinite
|
||||
centerMode
|
||||
>
|
||||
{projects.map((project, idx) => <div key={idx} className="select-none px-16 py-16 flex w-[296px] gap-16 border-gray-200 shadow-md border-2 rounded-10 transform transition-transform hover:cursor-pointer hover:scale-105" onClick={() => handleClick(project.id)}>
|
||||
{projects.map((project, idx) => <div key={idx} className="bg-gray-25 select-none px-16 py-16 flex w-[296px] gap-16 border-gray-200 shadow-md border-2 rounded-10 hover:cursor-pointer hover:bg-gray-100" onClick={() => handleClick(project.id)}>
|
||||
<img src={project.img} draggable="false" className="flex-shrink-0 w-80 h-80 bg-gray-200 border-0 rounded-8"></img>
|
||||
<div className="justify-around items-start min-w-0">
|
||||
<p className="text-body4 w-full font-bold overflow-ellipsis overflow-hidden whitespace-nowrap">{project.title}</p>
|
||||
|
||||
@@ -82,7 +82,7 @@ export default function ProjectCard({ onClose, direction, ...props }: ModalCard)
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-40 text-body4 leading-normal">{project.description}</p>
|
||||
<div className="flex gap-24 mt-24 flex-wrap">
|
||||
<div className="flex gap-16 mt-24 flex-wrap">
|
||||
<span className="chip-small bg-red-100 text-red-800 font-regular"> payments </span>
|
||||
<span className="chip-small bg-primary-100 text-primary-800 font-regular"> lightining </span>
|
||||
</div>
|
||||
@@ -91,12 +91,20 @@ export default function ProjectCard({ onClose, direction, ...props }: ModalCard)
|
||||
<button onClick={onVote} className="btn w-full bg-yellow-100 hover:bg-yellow-50 py-12 px-24 rounded-lg mb-24">Vote <MdLocalFireDepartment className='text-fire' /></button>
|
||||
</div>
|
||||
<div className="mt-40">
|
||||
<h3 className="text-h5 font-bold">Screenshots</h3>
|
||||
<div className="grid grid-cols-1 justify-items-center md:grid-cols-2 gap-x-24 gap-y-20">
|
||||
<div className="w-full max-w-[310px] self-center h-[130px] bg-gray-300 rounded-xl"></div>
|
||||
<div className="w-full max-w-[310px] self-center h-[130px] bg-gray-300 rounded-xl"></div>
|
||||
<div className="w-full max-w-[310px] self-center h-[130px] bg-gray-300 rounded-xl"></div>
|
||||
<div className="w-full max-w-[310px] self-center h-[130px] bg-gray-300 rounded-xl"></div>
|
||||
<h3 className="text-h5 font-bold mb-16">Screenshots</h3>
|
||||
<div className="grid grid-cols-2 gap-12 justify-items-center md:gap-24">
|
||||
<div className="w-full relative" style={{ aspectRatio: '16/9' }}>
|
||||
<div className="w-full h-full object-cover bg-gray-300 rounded-xl"></div>
|
||||
</div>
|
||||
<div className="w-full relative" style={{ aspectRatio: '16/9' }}>
|
||||
<div className="w-full h-full object-cover bg-gray-300 rounded-xl"></div>
|
||||
</div>
|
||||
<div className="w-full relative" style={{ aspectRatio: '16/9' }}>
|
||||
<div className="w-full h-full object-cover bg-gray-300 rounded-xl"></div>
|
||||
</div>
|
||||
<div className="w-full relative" style={{ aspectRatio: '16/9' }}>
|
||||
<div className="w-full h-full object-cover bg-gray-300 rounded-xl"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr className="my-40" />
|
||||
|
||||
@@ -44,12 +44,12 @@ export default function NavMobile({ onSearch }: Props) {
|
||||
|
||||
return (
|
||||
<nav className='block lg:hidden overflow-hidden z-[2010]'>
|
||||
<div className="p-16 w-screen flex items-center">
|
||||
<div className="p-16 w-screen flex justify-center items-center">
|
||||
<div className="w-40 h-40 bg-gray-100 rounded-8 mr-16 overflow-hidden">
|
||||
<img className="w-full h-full object-cover" src="https://www.figma.com/file/OFowr5RJk9YZCW35KT7D5K/image/07b85d84145942255afd215b3da26dbbf1dd03bd?fuid=772401335362859303" alt="" />
|
||||
</div>
|
||||
<h2 className="text-h5 font-bold mr-64">makers.bolt.fun</h2>
|
||||
<button className='rounded-full ml-auto mr-16 text-2xl w-[50px] h-[50px] hover:bg-gray-200' onClick={handleClick}>
|
||||
<h2 className="text-h5 font-bold mx-auto">makers.bolt.fun</h2>
|
||||
<button className='rounded-full mr-16 text-2xl w-[50px] h-[50px] hover:bg-gray-200' onClick={handleClick}>
|
||||
|
||||
{!open ? (<motion.div key={open ? 1 : 0} variants={navBtnVariant} initial='menuHide' animate='menuShow'><FiMenu /></motion.div>)
|
||||
: (<motion.div key={open ? 1 : 0} variants={navBtnVariant} initial='closeHide' animate='closeShow'><GrClose /></motion.div>)}
|
||||
@@ -75,7 +75,7 @@ export default function NavMobile({ onSearch }: Props) {
|
||||
|
||||
{/* <input className="btn bg-gray-100 w-full rounded-24 mt-16 placeholder-gray-500" placeholder="Search" /> */}
|
||||
</form>
|
||||
<button className="btn btn-primary w-full py-12 px-40 rounded-24 mt-64">Submit <AiFillThunderbolt className='inline-block text-thunder transform scale-125' /> app️</button>
|
||||
<button className="btn btn-primary w-full py-12 px-40 rounded-24 mt-40">Submit <AiFillThunderbolt className='inline-block text-thunder transform scale-125' /> app️</button>
|
||||
<button className="btn btn-gray w-full py-12 px-40 rounded-24 my-16"> <AiFillThunderbolt className='inline-block text-thunder transform scale-125' /> Connect Wallet </button>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -26,7 +26,11 @@ export default function Navbar() {
|
||||
const { isWalletConnected } = useAppSelector(state => ({ isWalletConnected: state.wallet.isConnected }))
|
||||
|
||||
const toggleSearch = () => {
|
||||
if (!searchOpen) inputRef.current?.focus();
|
||||
if (!searchOpen) {
|
||||
console.log(inputRef.current);
|
||||
inputRef.current?.focus();
|
||||
|
||||
}
|
||||
setSearchOpen(!searchOpen);
|
||||
}
|
||||
|
||||
@@ -84,7 +88,11 @@ export default function Navbar() {
|
||||
onChange={e => setSearchInput(e.target.value)}
|
||||
initial={{ scaleX: .3, opacity: 0, originX: 'right' }}
|
||||
animate={searchOpen ? { scaleX: 1, opacity: 1, originX: 'right' } : { scaleX: .3, opacity: 0, originX: 'right' }}
|
||||
className="absolute top-0 right-0 z-10 bg-gray-200 text-gray-600 focus:outline-primary w-[300px] py-12 px-20 pr-40 rounded-24 placeholder-gray-500" placeholder="Search" />}
|
||||
onAnimationComplete={() => {
|
||||
if (searchOpen) inputRef.current?.focus()
|
||||
}}
|
||||
className="absolute top-0 right-0 z-10 bg-gray-200 text-gray-600 focus:outline-primary w-[300px] py-12 px-20 pr-40 rounded-24 placeholder-gray-500" placeholder="Search" />
|
||||
}
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@@ -52,14 +52,14 @@ export default function VoteCard({ onClose, direction, ...props }: ModalCard) {
|
||||
{defaultOptions.map((option, idx) =>
|
||||
<button
|
||||
key={idx}
|
||||
className={`btn border px-12 rounded-md py-8 text-body ${idx === selectedOption && "border-primary-500 bg-primary-100 text-primary-600"}`}
|
||||
className={`btn border px-12 rounded-md py-8 text-body ${idx === selectedOption && "border-primary-500 bg-primary-100 hover:bg-primary-100 text-primary-600"}`}
|
||||
onClick={() => onSelectOption(idx)}
|
||||
>
|
||||
{option.text}<AiFillThunderbolt className='inline-block text-thunder' />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-body6 mt-14 text-gray-500">1 sat = 1 vote</p>
|
||||
<p className="text-body6 mt-12 text-gray-500">1 sat = 1 vote</p>
|
||||
<button className="btn btn-primary w-full mt-32" onClick={onClose}>
|
||||
Upvote
|
||||
</button>
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
}
|
||||
|
||||
.input-field {
|
||||
@apply flex-grow appearance-none w-full py-2 px-3 bg-transparent text-primary-800 leading-tight focus:outline-none;
|
||||
@apply flex-grow appearance-none w-full py-2 px-3 bg-transparent text-primary-500 leading-tight focus:outline-none;
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
|
||||
Reference in New Issue
Block a user