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

Revisions

  1. amarg26 created this gist Jun 30, 2018.
    82 changes: 82 additions & 0 deletions ProjectCardContainer.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,82 @@
    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} />;
    }
    }
    222 changes: 222 additions & 0 deletions ProjectDetailPage.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,222 @@
    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>
    );
    }
    34 changes: 34 additions & 0 deletions carddata.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,34 @@
    {
    "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"
    }
    ]
    }