Skip to content

Instantly share code, notes, and snippets.

@amarg26

amarg26/ProjectCardContainer.js

Created June 30, 2018 10:25
Show Gist options
  • Save amarg26/d37e183b507b93c32ddf3540ef4c996c to your computer and use it in GitHub Desktop.
Save amarg26/d37e183b507b93c32ddf3540ef4c996c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
carddata.json
{
"cards": [
{
"projectID": "00001",
"projectName": "One tent system",
"profileProjectImage":
"https://s3-sa-east-1.amazonaws.com/cdn.br.catarse/uploads/project/uploaded_image/72644/project_thumb_large_capinha.jpg",
"projectBy": "Crua Outdoors",
"projectDescrition":
"Lightweight Hiking Tent + Insulated Cocoon + Air-Framed Living Space: Use individually or together for the ultimate outdoors experience",
"projectLocation": " New York, NY"
},
{
"projectID": "00002",
"projectName": "Two tent system",
"profileProjectImage":
"https://s3-sa-east-1.amazonaws.com/cdn.br.catarse/uploads/project/uploaded_image/72644/project_thumb_large_capinha.jpg",
"projectBy": "Crua Outdoors",
"projectDescrition":
"Lightweight Hiking Tent + Insulated Cocoon + Air-Framed Living Space: Use individually or together for the ultimate outdoors experience",
"projectLocation": " New York, NY"
},
{
"projectID": "00003",
"projectName": "Three tent system",
"profileProjectImage":
"https://s3-sa-east-1.amazonaws.com/cdn.br.catarse/uploads/project/uploaded_image/72644/project_thumb_large_capinha.jpg",
"projectBy": "Crua Outdoors",
"projectDescrition":
"Lightweight Hiking Tent + Insulated Cocoon + Air-Framed Living Space: Use individually or together for the ultimate outdoors experience",
"projectLocation": " New York, NY"
}
]
}
Raw
ProjectCardContainer.js
import React from "react";
//import { Link, NavLink, Router } from 'react-router-dom';
//import { Route } from 'react-router-dom';
const json = require('../HomePopularCards/carddata.json');
const Card = props => {
return (
<div className="card card-project" style={{ width: "18rem" }}>
<img className="card-img-top" src={props.profileProjectImage} alt="" />
<div className="top-card-body">
{/* <h6 className="link-hidden"><Link to={`/projectdetailpage/${props.projectID}/${props.projectName}`} target="_blank">{props.projectName}</Link></h6> */}
{/* <h6 className="link-hidden"><Link to={`/projectdetailpage/${props.projectID}`} target={_blank}>{props.projectName}</Link></h6> */}
<h6 className="link-hidden">
<a href={`/projectdetailpage/${props.projectID}`} >
{props.projectName}
</a>
</h6>
<p className="fontcolor-secondary fontsize-smallest">
{props.projectBy}
</p>
<div className="fontcolor-secondary fontsize-smaller">
<a href={null} className="link-hidden">
{props.projectDescrition}
</a>
</div>
<div className="fontsize-smallest fontcolor-secondary">
{props.projectLocation}
</div>
</div>
<div className="card-project-meter">
<div className="progress">
<div
className="progress-bar bar-value"
role="progressbar"
aria-valuenow={75}
aria-valuemin={0}
aria-valuemax={100}
style={{ width: "75%" }}
/>
</div>
</div>
<div className="bottom-card-body">
<div className="row">
<div className="col-md-4">
<div className="fontsize-base fontweight-semibold">46%</div>
</div>
<div className="col-md-4">
<div className="fontsize-smaller fontweight-semibold">$ 1569</div>
<div className="fontsize-smallest lineheight-tightest">Funded</div>
</div>
<div className="col-md-4">
<div className="fontsize-smaller fontweight-semibold">100</div>
<div className="fontsize-smallest lineheight-tightest">
Days Remains
</div>
</div>
</div>
</div>
</div>
);
};
const CardList = props => {
return (
<div className="row">
{props.cards.map(card => (
<div key={card.uniqueKey} className="col-md-4">
<Card {...card} />
</div>
))}
</div>
);
};
export default class ProjectCardContainer extends React.Component {
state = json;
render() {
return <CardList cards={this.state.cards} />;
}
}
Raw
ProjectDetailPage.js
import React from "react";
const json = require('../HomePopularCards/carddata.json');
console.log(json);
export default function ProjectDetailPage(props) {
const projectID = props.match.params.projectID;
const project = json.cards.find(card => card.projectID === projectID);
return (
<div>
<div className="container-fluid page-header">
<div className="row">
<div className="col-md-12">
<h2 className="text-center">{project.projectName}</h2>
</div>
</div>
</div>
<div className="container">
<div className="row">
<div className="col-md-8">
<iframe width="667" height="315" src={project.videoUrl} title="Tent Video" />
<div className="project-share w-hidden-main w-hidden-medium">
<a
className="btn btn-inline btn-small btn-transparent link-hidden-light u-marginbottom-10"
href="/pt/explore?pg_search=DF"
>
<span className="fa fa-map-marker" /> New York, NY
</a>
<a
className="btn btn-inline btn-small btn-transparent link-hidden-light"
href="/pt/explore#by_category_id/7"
>
<span className="fa fa-tag" />Product Design
</a>
</div>
<div className="project-share w-hidden-small w-hidden-tiny">
<div className="u-marginbottom-30 u-text-center-small-only">
<div className="w-inline-block fontcolor-secondary fontsize-smaller u-marginright-20">
Share On:
</div>
<div
className="btn btn-inline btn-medium btn-terciary u-marginright-20"
data-href="https://developers.facebook.com/docs/plugins/"
data-layout="button_count"
data-mobile-iframe="true"
data-size="small"
>
<a
className="fb-xfbml-parse-ignore"
target="_blank" rel="noopener noreferrer"
href="https://www.facebook.com/sharer/sharer.php?u=http://myhobnob.xyz/projects/1&amp;src=sdkpreparse"
>
Facebook
</a>
</div>
<div
className="btn btn-inline btn-medium btn-terciary u-marginright-20"
data-href="https://developers.facebook.com/docs/plugins/"
data-layout="button_count"
data-mobile-iframe="true"
data-size="small"
>
<a
className="fb-xfbml-parse-ignore"
target="_blank" rel="noopener noreferrer"
href="https://www.linkedin.com/shareArticle?mini=true&amp;url=http://myhobnob.xyz/1/summary=Lightweight Hiking Tent + Insulated Cocoon + Air-Framed Living Space: Use individually or together for the ultimate outdoors experiencesource=LinkedIn"
>
LinkedIn
</a>
</div>
</div>
</div>
</div>
<div className="col-md-4">
<div className="aside" id="project-sidebar">
<div className="project-stats">
<div className="project-stats-inner">
<div className="project-blurb">
{project.projectBy}
{project.projectDescrition}
{project.projectLocation}
</div>
<div className="back-project-btn-div">
<div className="back-project--btn-row">
<a
className="btn btn-back-it btn-large u-marginbottom-20"
id="contribute_project_form"
href="https://www.indiegogo.com/projects/one-tent-system-every-possibility-crua-clan-camping/"
>
Back It
</a>
</div>
<div className="back-project-btn-row-right">
<a
className="facebook_cube3d tsc_social_cube64"
title="facebook"
href="https://www.facebook.com/sharer/sharer.php?u=http://myhobnob.xyz/projects/1&amp;src=sdkpreparse"
>
facebook
</a>
</div>
</div>
<div className="fontsize-smaller u-marginbottom-30 ">
You can support this project until Sat, September 2 2017
12:01 AM BST.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="container">
<div className="row">
<div className="col-md-8 project-about">
<p className="fontsize-base">
<br />
<strong>Overview</strong>
</p>
{/* <img src={require(`../../../assets/images/${project.overviewImage}`)} /><br /> <br /> */}
{project.overviewPara}
<br />
<br />
{project.subpara1}
<br />
<br />
{project.subpara2}
<br />
<br />
{project.subpara3}
<br />
<br />
{project.subpara4}
<br />
<br />
{project.subpara5}
<br />
<br />
{/* <p><img src={require(`../../../assets/images/${project.tentImage1}`)} /></p>
<p><img src={require(`../../../assets/images/${project.tentImage2}`)} /></p>
<p><img src={require(`../../../assets/images/${project.tentImage3}`)} /></p>
<p><img src={require(`../../../assets/images/${project.tentImage4}`)} /></p>
<p><img src={require(`../../../assets/images/${project.tentImage5}`)} /></p>
<p><img src={require(`../../../assets/images/${project.tentImage6}`)} /></p> */}
<p>
<strong>One Revolutionary System</strong>
</p>
{project.midPara}
<br />
<br />
{project.midPara1}
<br />
<br />
{project.midPara2}
<br />
<br />
{project.midPara3}
<br />
<br />
{project.midPara4}
<br />
<br />
{/* <p><img src={require(`../../../assets/images/${project.tentImage7}`)} /></p>
<p><img src={require(`../../../assets/images/${project.tentImage8}`)} /></p>
<p><strong>SPECS</strong></p>
<p><img src={require(`../../../assets/images/${project.tentImage10}`)} /></p>
<p><strong>Timeline</strong></p>
<p><img src={require(`../../../assets/images/${project.tentImage11}`)} /></p>
<p><strong>As seen on</strong></p>
<p><img src={require(`../../../assets/images/${project.tentImage9}`)} /></p> */}
</div>
<div className="col-md-4 ">
<br />
<div className="fontsize-base fontweight-semibold u-marginbottom-30">
Project Inventor
</div>
<div className="reward u-marginbottom-30" id="rewards">
<div className="card-reward card card-secondary u-marginbottom-10">
<div className="u-marginbottom-20">
{/* <img className="img-circle" src={require(`../../../assets/images/${project.profileImage}`)} /> */}
<div className="fontsize-base fontweight-semibold">
Crua Outdoors
</div>
</div>
<br />
<div className="fontsize-smaller fontweight-semibold" />
<div className="fontsize-smaller reward-description fontcolor-secondary">
<p>Visit Them:</p>
<ul className="w-hidden-tiny w-hidden-small w-list-unstyled fontsize-smaller fontweight-semibold u-margintop-20 u-marginbottom-20">
<li>
<a
className="link-hidden"
target="_blank" rel="noopener noreferrer"
href="https://www.cruaoutdoors.com"
>
https://www.cruaoutdoors.com
</a>
</li>
<li>
<a
className="link-hidden"
target="_blank" rel="noopener noreferrer"
href="https://www.facebook.com/thermotents/"
>
www.facebook.com
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment