Skip to content

Commit

Permalink
chore: make premium themes more templated and dynamic
Browse files Browse the repository at this point in the history
  • Loading branch information
@TheSharpieOne
TheSharpieOne committed Feb 6, 2020
1 parent 1fd2d22 commit 0a8e7f5
Show file tree
Hide file tree
Showing 5 changed files with 181 additions and 140 deletions.
227 changes: 87 additions & 140 deletions docs/lib/PremiumThemes/index.js
View file
@@ -1,144 +1,91 @@
import React from 'react';
import { Card, Button, CardBody, CardHeader, Container, Row, Col, Jumbotron } from 'reactstrap';

const creativeTimProducts = [
{
productTitle: "Now UI Kit PRO with Reactstrap",
productTagline: "Premium Kit Template for Bootstrap 4 and Reactstrap",
productImageLink: "https://raw.githubusercontent.com/creativetimofficial/public-assets/master/now-ui-kit-pro-react/opt_nukp_react_thumbnail.jpg",
productURL: "https://www.creative-tim.com/product/now-ui-kit-pro-react"
},
{
productTitle: "Now UI Dashboard PRO with Reactstrap",
productTagline: "Premium Reactstrap (Bootstrap 4) Admin Template",
productImageLink: "https://raw.githubusercontent.com/creativetimofficial/public-assets/master/now-ui-dashboard-pro-react/now-ui-dashboard-pro-react.jpg",
productURL: "https://www.creative-tim.com/product/now-ui-dashboard-pro-react"
},
{
productTitle: "Argon Design System with Reactstrap",
productTagline: "Free Design System for Bootstrap 4 and Reactstrap",
productImageLink: "https://raw.githubusercontent.com/creativetimofficial/public-assets/master/argon-design-system-react/argon-design-system-react.jpg",
productURL: "https://www.creative-tim.com/product/argon-design-system-react"
},
{
productTitle: "Argon Dashboard PRO with Reactstrap",
productTagline: "Premium Reactstrap (Bootstrap 4) Admin Template",
productImageLink: "https://raw.githubusercontent.com/creativetimofficial/public-assets/master/argon-dashboard-pro-react/argon-dashboard-pro-react.jpg",
productURL: "https://www.creative-tim.com/product/argon-dashboard-pro-react"
},
{
productTitle: "Paper Kit PRO with Reactstrap",
productTagline: "Premium Kit Template for Bootstrap 4 and Reactstrap",
productImageLink: "https://raw.githubusercontent.com/creativetimofficial/public-assets/master/paper-kit-pro-react/opt_pkp_react_thumbnail.jpg",
productURL: "https://www.creative-tim.com/product/paper-kit-pro-react"
},
{
productTitle: "Paper Dashboard PRO with Reactstrap",
productTagline: "Premium Reactstrap (Bootstrap 4) Admin Template",
productImageLink: "https://raw.githubusercontent.com/creativetimofficial/public-assets/master/paper-dashboard-2-pro-react/opt_pdp_react.jpg",
productURL: "https://www.creative-tim.com/product/paper-dashboard-pro-react"
},
{
productTitle: "BLK• Design System PRO with Reactstrap",
productTagline: "Premium Design System for Bootstrap 4 and Reactstrap",
productImageLink: "https://raw.githubusercontent.com/creativetimofficial/public-assets/master/blk-design-system-pro-react/blk-design-system-pro-react.jpg",
productURL: "https://www.creative-tim.com/product/blk-design-system-pro-react"
},
{
productTitle: "Black Dashboard PRO with Reactstrap",
productTagline: "Premium Reactstrap (Bootstrap 4) Admin Template",
productImageLink: "https://raw.githubusercontent.com/creativetimofficial/public-assets/master/black-dashboard-pro-react/black-dashboard-pro-react.jpg",
productURL: "https://www.creative-tim.com/product/black-dashboard-pro-react"
}
];
import {
Card,
Button,
CardBody,
CardHeader,
Container,
Row,
Col,
Jumbotron,
} from 'reactstrap';
import premiumThemes from './premium';

export default () => {
return (
<div>
<Jumbotron tag="section" className="jumbotron-header text-center mb-3">
<p className="lead">
<img src="/assets/logo.png" alt="" width="110px"/>
</p>
<h1>Reactstrap Themes & Templates</h1>
<h4 className="mb-5">A collection of free and premium React templates and themes powered by Reactstrap</h4>
</Jumbotron>
<Container>
<h2 className="font-weight-bold">
UiFort
</h2>
<p className="mb-4">Check out some examples that our partners from UiFort created using the Reactstrap components library.</p>
<Row>
<Col md="7">
<Card>
<CardHeader className="p-3">
<h5 className="m-0 font-weight-bold">
<a href="https://uifort.com/template/bamburgh-react-admin-dashboard-reactstrap-pro/?ref=reactstrap.github.io" target="_blank" title="View details">
Bamburgh React Admin Dashboard with Reactstrap PRO
</a>
</h5>
<p className="mb-0 mt-1 text-muted">
Premium React Admin Template
</p>
</CardHeader>
<CardBody className="p-3">
<a href="https://uifort.com/template/bamburgh-react-admin-dashboard-reactstrap-pro/?ref=reactstrap.github.io" target="_blank" title="View details">
<img className="rounded img-fluid" src="/assets/themes/bamburgh-react-admin-dashboard-reactstrap-pro.jpg" alt=""/>
</a>
</CardBody>
</Card>
</Col>
<Col md="5">
<Card className="h-100 mt-3 mt-lg-0 d-flex justify-content-center align-items-center text-muted">
<div>
More themes will be added soon !
</div>
</Card>
</Col>
</Row>
<div className="text-center mt-5">
<Button tag="a" size="lg" href="https://uifort.com" color="primary" target="_blank">
See more themes from UiFort
</Button>
</div>
</Container>
<Container>
<h2 className="font-weight-bold">
Creative Tim
</h2>
<p className="mb-4">Check out some examples that our partners from Creative Tim created using the Reactstrap components library.</p>
<Row>
{
creativeTimProducts.map((prop,key) => {
return (
<Col md="6" key={key} className="mt-3 mb-3">
<Card>
<CardHeader className="p-3">
<h5 className="m-0 font-weight-bold">
<a href={prop.productURL + "?ref=reactstrap.github.io"} target="_blank" title="View details">
{prop.productTitle}
</a>
</h5>
<p className="mb-0 mt-1 text-muted">
{prop.productTagline}
</p>
</CardHeader>
<CardBody className="p-3">
<a href={prop.productURL + "?ref=reactstrap.github.io"} target="_blank" title="View details">
<img className="rounded img-fluid" src={prop.productImageLink} alt=""/>
</a>
</CardBody>
</Card>
</Col>
);
})
}
</Row>
<div className="text-center mt-5">
<Button tag="a" size="lg" href="https://www.creative-tim.com" color="primary" target="_blank">
See more themes from Creative Tim
</Button>
</div>
</Container>
</div>
);
return (
<div>
<Jumbotron tag="section" className="jumbotron-header text-center mb-3">
<p className="lead">
<img src="/assets/logo.png" alt="" width="110px" />
</p>
<h1>Reactstrap Themes &amp; Templates</h1>
<h4 className="mb-5">
A collection of free and premium React templates and themes powered by
Reactstrap
</h4>
</Jumbotron>
{premiumThemes.map(company => (
<Container key={company.creator.name} className="premium-section">
<h2 className="font-weight-bold">{company.creator.name}</h2>
<p className="mb-4">{company.creator.tagLine}</p>
<Row>
{company.products.map(product => {
return (
<Col md="6" key={product.title}>
<Card className="my-3">
<CardHeader className="p-3">
<h3 className="m-0 h6 font-weight-bold">
<a
href={`${product.link}?ref=reactstrap.github.io`}
target="_blank"
rel="sponsored noopener noreferrer"
title="View details"
>
{product.title}
</a>
</h3>
<p className="mb-0 mt-1 text-muted">{product.tagLine}</p>
</CardHeader>
<CardBody className="p-3">
<a
href={`${product.link}?ref=reactstrap.github.io`}
target="_blank"
rel="sponsored noopener noreferrer"
title="View details"
>
<img
className="rounded img-fluid"
src={product.imgUrl}
alt=""
/>
</a>
</CardBody>
</Card>
</Col>
);
})}
{company.products.length % 2 !== 0 && (
<Col md="6" className="my-3">
<Card className="h-100 d-flex justify-content-center align-items-center text-muted">
<div>More themes will be added soon !</div>
</Card>
</Col>
)}
</Row>
<div className="text-center mt-3 mb-5">
<Button
tag="a"
size="lg"
href={`${company.creator.link}?ref=reactstrap.github.io`}
color="primary"
target="_blank"
rel="sponsored noopener noreferrer"
>
See more themes from {company.creator.name}
</Button>
</div>
</Container>
))}
</div>
);
};
87 changes: 87 additions & 0 deletions docs/lib/PremiumThemes/premium.js
View file
@@ -0,0 +1,87 @@
export default [
{
creator: {
name: 'UiFort',
tagLine:
'Check out some examples that our partners from UiFort created using the Reactstrap components library.',
link: 'https://uifort.com',
},
products: [
{
title: 'Bamburgh React Admin Dashboard with Reactstrap PRO',
tagLine: 'Premium React Admin Template',
imgUrl:
'/assets/themes/bamburgh-react-admin-dashboard-reactstrap-pro.jpg',
link:
'https://uifort.com/template/bamburgh-react-admin-dashboard-reactstrap-pro/?ref=reactstrap.github.io',
},
],
},
{
creator: {
name: 'Creative Tim',
tagLine:
'Check out some examples that our partners from Creative Tim created using the Reactstrap components library.',
link: 'https://www.creative-tim.com',
},
products: [
{
title: 'Now UI Kit PRO with Reactstrap',
tagLine: 'Premium Kit Template for Bootstrap 4 and Reactstrap',
imgUrl:
'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/now-ui-kit-pro-react/opt_nukp_react_thumbnail.jpg',
link: 'https://www.creative-tim.com/product/now-ui-kit-pro-react',
},
{
title: 'Now UI Dashboard PRO with Reactstrap',
tagLine: 'Premium Reactstrap (Bootstrap 4) Admin Template',
imgUrl:
'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/now-ui-dashboard-pro-react/now-ui-dashboard-pro-react.jpg',
link: 'https://www.creative-tim.com/product/now-ui-dashboard-pro-react',
},
{
title: 'Argon Design System with Reactstrap',
tagLine: 'Free Design System for Bootstrap 4 and Reactstrap',
imgUrl:
'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/argon-design-system-react/argon-design-system-react.jpg',
link: 'https://www.creative-tim.com/product/argon-design-system-react',
},
{
title: 'Argon Dashboard PRO with Reactstrap',
tagLine: 'Premium Reactstrap (Bootstrap 4) Admin Template',
imgUrl:
'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/argon-dashboard-pro-react/argon-dashboard-pro-react.jpg',
link: 'https://www.creative-tim.com/product/argon-dashboard-pro-react',
},
{
title: 'Paper Kit PRO with Reactstrap',
tagLine: 'Premium Kit Template for Bootstrap 4 and Reactstrap',
imgUrl:
'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/paper-kit-pro-react/opt_pkp_react_thumbnail.jpg',
link: 'https://www.creative-tim.com/product/paper-kit-pro-react',
},
{
title: 'Paper Dashboard PRO with Reactstrap',
tagLine: 'Premium Reactstrap (Bootstrap 4) Admin Template',
imgUrl:
'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/paper-dashboard-2-pro-react/opt_pdp_react.jpg',
link: 'https://www.creative-tim.com/product/paper-dashboard-pro-react',
},
{
title: 'BLK• Design System PRO with Reactstrap',
tagLine: 'Premium Design System for Bootstrap 4 and Reactstrap',
imgUrl:
'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/blk-design-system-pro-react/blk-design-system-pro-react.jpg',
link:
'https://www.creative-tim.com/product/blk-design-system-pro-react',
},
{
title: 'Black Dashboard PRO with Reactstrap',
tagLine: 'Premium Reactstrap (Bootstrap 4) Admin Template',
imgUrl:
'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/black-dashboard-pro-react/black-dashboard-pro-react.jpg',
link: 'https://www.creative-tim.com/product/black-dashboard-pro-react',
},
],
},
];
4 changes: 4 additions & 0 deletions docs/static/docs.css
View file
Expand Up @@ -246,6 +246,10 @@ pre, code {
max-width: 620px;
}
}
.premium-section + .premium-section {
border-top: 1px solid lightgrey;
padding-top: 3em;
}

/* http://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript+bash+jsx&plugins=autolinker */
/**
Expand Down
2 changes: 2 additions & 0 deletions scripts/docs
View file
Expand Up @@ -49,5 +49,7 @@ git config user.email "reactstrap@github.io"
git add --all
git commit -m "docs(travis): publish documentation for $TRAVIS_TAG ($TRAVIS_COMMIT)"
git push origin $BRANCH > /dev/null 2>&1
git tag -a $VERSION -m "docs $TRAVIS_TAG"
git push --tags > /dev/null 2>&1

success "Successfully published documentation for $TRAVIS_TAG ($TRAVIS_COMMIT)!"
1 change: 1 addition & 0 deletions webpack.docs.config.js
View file
Expand Up @@ -41,6 +41,7 @@ const paths = [
'/utilities/',
'/utilities/colors/',
'/utilities/clearfix/',
'/premium-themes/',
'/404.html'
];

Expand Down

0 comments on commit 0a8e7f5

Please sign in to comment.