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

extracted project card to its own component

Browse Source
This commit is contained in:
=Mtg_Dev
2021-11-26 10:22:29 +02:00
parent 77cceb218d
commit 1c241ce360
15 changed files with 68 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
build/asset-manifest.json
View File

@@ -1,8 +1,8 @@
{
"files": {
"main.css": "./static/css/main.a485863b.chunk.css",
"main.js": "./static/js/main.8f4c4505.chunk.js",
"main.js.map": "./static/js/main.8f4c4505.chunk.js.map",
"main.css": "./static/css/main.5e6dbc1b.chunk.css",
"main.js": "./static/js/main.1dcb6923.chunk.js",
"main.js.map": "./static/js/main.1dcb6923.chunk.js.map",
"runtime-main.js": "./static/js/runtime-main.1d3ad3fe.js",
"runtime-main.js.map": "./static/js/runtime-main.1d3ad3fe.js.map",
"static/css/2.4cfadce7.chunk.css": "./static/css/2.4cfadce7.chunk.css",
@@ -12,7 +12,7 @@
"static/js/3.b6363b85.chunk.js.map": "./static/js/3.b6363b85.chunk.js.map",
"index.html": "./index.html",
"static/css/2.4cfadce7.chunk.css.map": "./static/css/2.4cfadce7.chunk.css.map",
"static/css/main.a485863b.chunk.css.map": "./static/css/main.a485863b.chunk.css.map",
"static/css/main.5e6dbc1b.chunk.css.map": "./static/css/main.5e6dbc1b.chunk.css.map",
"static/js/2.3c900185.chunk.js.LICENSE.txt": "./static/js/2.3c900185.chunk.js.LICENSE.txt",
"static/media/styles.css": "./static/media/revicons.e8746a62.woff"
},
@@ -20,7 +20,7 @@
"static/js/runtime-main.1d3ad3fe.js",
"static/css/2.4cfadce7.chunk.css",
"static/js/2.3c900185.chunk.js",
"static/css/main.a485863b.chunk.css",
"static/js/main.8f4c4505.chunk.js"
"static/css/main.5e6dbc1b.chunk.css",
"static/js/main.1dcb6923.chunk.js"
]
}

2
build/index.html
View File

@@ -1 +1 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="A place for creators to share theier lightning apps"/><link rel="manifest" href="./manifest.json"/><title>makers.bolt.fun</title><link href="./static/css/2.4cfadce7.chunk.css" rel="stylesheet"><link href="./static/css/main.a485863b.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,a,i=r[0],c=r[1],l=r[2],s=0,p=[];s<i.length;s++)a=i[s],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&p.push(o[a][0]),o[a]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(f&&f(r);p.length;)p.shift()();return u.push.apply(u,l||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var c=t[i];0!==o[c]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var u,i=document.createElement("script");i.charset="utf-8",i.timeout=120,a.nc&&i.setAttribute("nonce",a.nc),i.src=function(e){return a.p+"static/js/"+({}[e]||e)+"."+{3:"b6363b85"}[e]+".chunk.js"}(e);var c=new Error;u=function(r){i.onerror=i.onload=null,clearTimeout(l);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),u=r&&r.target&&r.target.src;c.message="Loading chunk "+e+" failed.\n("+n+": "+u+")",c.name="ChunkLoadError",c.type=n,c.request=u,t[1](c)}o[e]=void 0}};var l=setTimeout((function(){u({type:"timeout",target:i})}),12e4);i.onerror=i.onload=u,document.head.appendChild(i)}return Promise.all(r)},a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="./",a.oe=function(e){throw console.error(e),e};var i=this["webpackJsonpmakers.bolt.fun"]=this["webpackJsonpmakers.bolt.fun"]||[],c=i.push.bind(i);i.push=r,i=i.slice();for(var l=0;l<i.length;l++)r(i[l]);var f=c;t()}([])</script><script src="./static/js/2.3c900185.chunk.js"></script><script src="./static/js/main.8f4c4505.chunk.js"></script></body></html>
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="A place for creators to share theier lightning apps"/><link rel="manifest" href="./manifest.json"/><title>makers.bolt.fun</title><link href="./static/css/2.4cfadce7.chunk.css" rel="stylesheet"><link href="./static/css/main.5e6dbc1b.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,a,i=r[0],c=r[1],l=r[2],s=0,p=[];s<i.length;s++)a=i[s],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&p.push(o[a][0]),o[a]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(f&&f(r);p.length;)p.shift()();return u.push.apply(u,l||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var c=t[i];0!==o[c]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var u,i=document.createElement("script");i.charset="utf-8",i.timeout=120,a.nc&&i.setAttribute("nonce",a.nc),i.src=function(e){return a.p+"static/js/"+({}[e]||e)+"."+{3:"b6363b85"}[e]+".chunk.js"}(e);var c=new Error;u=function(r){i.onerror=i.onload=null,clearTimeout(l);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),u=r&&r.target&&r.target.src;c.message="Loading chunk "+e+" failed.\n("+n+": "+u+")",c.name="ChunkLoadError",c.type=n,c.request=u,t[1](c)}o[e]=void 0}};var l=setTimeout((function(){u({type:"timeout",target:i})}),12e4);i.onerror=i.onload=u,document.head.appendChild(i)}return Promise.all(r)},a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="./",a.oe=function(e){throw console.error(e),e};var i=this["webpackJsonpmakers.bolt.fun"]=this["webpackJsonpmakers.bolt.fun"]||[],c=i.push.bind(i);i.push=r,i=i.slice();for(var l=0;l<i.length;l++)r(i[l]);var f=c;t()}([])</script><script src="./static/js/2.3c900185.chunk.js"></script><script src="./static/js/main.1dcb6923.chunk.js"></script></body></html>

4
build/static/css/main.a485863b.chunk.css → build/static/css/main.5e6dbc1b.chunk.css
View File

File diff suppressed because one or more lines are too long

1
build/static/css/main.5e6dbc1b.chunk.css.map Normal file
View File

File diff suppressed because one or more lines are too long

1
build/static/css/main.a485863b.chunk.css.map
View File

File diff suppressed because one or more lines are too long

4
build/static/js/main.8f4c4505.chunk.js → build/static/js/main.1dcb6923.chunk.js
View File

File diff suppressed because one or more lines are too long

2
build/static/js/main.8f4c4505.chunk.js.map → build/static/js/main.1dcb6923.chunk.js.map
View File

File diff suppressed because one or more lines are too long

2
src/Components/ClaimProject/Claim_CopySignatureCard.tsx
View File

@@ -2,7 +2,7 @@ import { motion } from 'framer-motion'
import { Direction, ModalId, replaceModal } from '../../redux/features/modals.slice';
import { useAppDispatch, useAppSelector } from '../../utils/hooks';
import { ModalCard, modalCardVariants } from '../Shared/ModalsContainer/ModalsContainer'
import { useCallback, useEffect, useState } from 'react';
import { useCallback } from 'react';
import { IoClose } from 'react-icons/io5';
import { IoIosCopy } from 'react-icons/io'
import CopyToClipboard from 'react-copy-to-clipboard';

6
src/Components/ClaimProject/Claim_FundWithdrawCard.tsx
View File

@@ -1,10 +1,6 @@
import { motion } from 'framer-motion'
import { Direction, ModalId, replaceModal } from '../../redux/features/modals.slice';
import { useAppDispatch, useAppSelector } from '../../utils/hooks';
import { useAppDispatch } from '../../utils/hooks';
import { ModalCard, modalCardVariants } from '../Shared/ModalsContainer/ModalsContainer'
import { useCallback, useEffect, useState } from 'react';
import { IoClose } from 'react-icons/io5';
import { IoIosCopy } from 'react-icons/io'
export default function Claim_FundWithdrawCard({ onClose, direction, ...props }: ModalCard) {

21
src/Components/ExplorePage/partials/ProjectCardMini.tsx Normal file
View File

@@ -0,0 +1,21 @@
import { MdLocalFireDepartment } from "react-icons/md";
import { ProjectCard } from "../../../utils/interfaces";
interface Props {
project: ProjectCard
onClick: (projectId: string) => void
}
export default function ProjectCardMini({ project, onClick }: Props) {
return (
<div className="bg-gray-25 select-none px-16 py-16 flex w-[296px] gap-16 border border-gray-200 rounded-10 hover:cursor-pointer hover:bg-gray-100" onClick={() => onClick(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>
<p className="text-body5 text-gray-600 font-light my-[5px]">{project.category.title}</p>
<span className="chip-small bg-warning-50 text-yellow-700 font-light text-body5 py-[3px] px-10"> <MdLocalFireDepartment className='inline-block text-fire transform text-body4 align-middle' /> {project.votes_count} </span>
</div>
</div>
);
}

27
src/Components/ExplorePage/partials/ProjectsRow.tsx
View File

@@ -1,10 +1,11 @@
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 { MdDoubleArrow, MdLocalFireDepartment } from 'react-icons/md';
import { useAppDispatch } from "../../../utils/hooks";
import { ModalId, openModal } from "../../../redux/features/modals.slice";
import _throttle from 'lodash.throttle'
import ProjectCardMini from "./ProjectCardMini";
const responsive = {
all: {
@@ -18,9 +19,9 @@ const calcNumItems = () => {
return items;
}
interface Props { title: string | ReactElement, projects: ProjectCard[] }
interface Props { title: string | ReactElement, categoryId: string, projects: ProjectCard[] }
export default function ProjectsRow({ title, projects }: Props) {
export default function ProjectsRow({ title, categoryId, projects }: Props) {
const dispatch = useAppDispatch()
const [carouselItmsCnt, setCarouselItmsCnt] = useState(calcNumItems);
@@ -51,7 +52,13 @@ export default function ProjectsRow({ title, projects }: Props) {
return (
<div className='mb-48'>
<h3 className="font-bolder text-body3 mb-24 px-32">{title}</h3>
<h3 className="font-bolder text-body3 mb-24 px-32">{title}
<span>
<MdDoubleArrow className='text-gray-200 ml-8 hover:cursor-pointer align-bottom transform scale-y-110 scale-x-125 origin-left' onClick={() => {
console.log(categoryId);
}} />
</span>
</h3>
<Carousel
containerClass='pl-32 pr-[-32px]'
showDots={false}
@@ -60,15 +67,9 @@ export default function ProjectsRow({ title, projects }: Props) {
centerMode
itemClass='pb-[1px]'
>
{projects.map((project, idx) => <div key={idx} className="bg-gray-25 select-none px-16 py-16 flex w-[296px] gap-16 border border-gray-200 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>
<p className="text-body5 text-gray-600 font-light my-[5px]">{project.category.title}</p>
<span className="chip-small bg-warning-50 text-yellow-700 font-light text-body5 py-[3px] px-10"> <MdLocalFireDepartment className='inline-block text-fire transform text-body4 align-middle' /> {project.votes_count} </span>
</div>
</div>)}
{projects.map((project, idx) =>
<ProjectCardMini key={idx} project={project} onClick={handleClick} />
)}
</Carousel>
</div>

11
src/Components/ExplorePage/partials/ProjectsSection.tsx
View File

@@ -1,7 +1,7 @@
import { useQuery } from "react-query";
import { getLatestProjects } from "../../../api"
import ProjectsRow from "./ProjectsRow";
import { AiFillThunderbolt } from 'react-icons/ai';
import { MdLocalFireDepartment } from "react-icons/md";
export default function ProjectsSection() {
@@ -12,9 +12,14 @@ export default function ProjectsSection() {
return (
<div className='mt-32 lg:mt-48'>
<ProjectsRow title={<>Hottest <AiFillThunderbolt className='inline-block text-thunder transform scale-125' /> apps</>}
<ProjectsRow title={<>Hottest <MdLocalFireDepartment className='inline-block text-fire align-bottom scale-125 origin-bottom' /></>}
categoryId='hottest'
projects={data[0].projects} />
{data.slice(1).map(({ title, projects }) => <ProjectsRow key={title} title={title} projects={projects} />)}
{data.slice(1).map(({ category, projects, }) => <ProjectsRow
key={category.id}
categoryId={category.id}
title={category.title}
projects={projects} />)}
</div>
)
}

2
src/Components/Project/ProjectCard.tsx
View File

@@ -72,7 +72,7 @@ export default function ProjectCard({ onClose, direction, ...props }: ModalCard)
<div className="flex-shrink-0 w-[93px] h-[93px] rounded-md overflow-hidden">
<img className="w-full h-full object-cover" src={project.thumbnail_image} alt="" />
</div>
<div className='flex flex-col items-start justify-between'>
<div className='flex flex-col items-start justify-between self-stretch'>
<h3 className="text-h3 font-regular">{project.title}</h3>
<a className="text-blue-400 font-regular text-body4" target='_blank' rel="noreferrer" href={project.website}>{project.website?.replace(/(^\w+:|^)\/\//, '')}</a>
<div>

12
src/api/index.ts
View File

@@ -17,14 +17,12 @@ export async function getProjectsByCategory(
// returns the latest bunch of projects in each ( or some ) categories, and returns the hottest projects
export async function getLatestProjects(): Promise<
{ title: string; projects: ProjectCard[] }[]
{ category: ProjectCategory; projects: ProjectCard[] }[]
> {
return [{ title: "hottest_apps", projects: data.projectsCards }].concat(
data.categories.slice(0, 2).map((cat) => ({
title: cat.title,
projects: data.projectsCards,
}))
);
return data.categories.slice(0, 3).map((cat) => ({
category: cat,
projects: data.projectsCards,
}));
}
export async function getProjectById(projectId: string): Promise<Project> {

4
src/api/mockData.json
View File

@@ -1,5 +1,9 @@
{
"categories": [
{
"id": "111",
"title": "Hottest"
},
{
"id": "123",
"title": "Art & Collectibles"