Skip to content

Commit

Permalink
chore: Add tabs
Browse files Browse the repository at this point in the history
  • Loading branch information
@LizBaker
LizBaker committed Jun 2, 2021
1 parent 5ff0def commit b00e56b
Showing 1 changed file with 167 additions and 118 deletions.
285 changes: 167 additions & 118 deletions src/templates/ObservabilityPackDetails.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import PropTypes from 'prop-types';

import PageLayout from '../components/PageLayout';
import FeatherIcon from '../components/FeatherIcon';
import DevSiteSeo from '../components/DevSiteSeo';
import Tabs from '../components/Tabs';
import noImagePlaceholder from '../images/no-image-placeholder.png';
import {
Layout,
Expand All @@ -22,131 +22,180 @@ const exampleContributors = [
];

const ObservabilityPackDetails = ({ data }) => {
console.log(data);
const { pack, slug } = data.sitePage.context;
const { pack } = data.sitePage.context;

return (
<>
{/* <DevSiteSeo
title={title}
description={description}
tags={tags}
location={location}
/> */}
<PageLayout type={PageLayout.TYPE.RELATED_CONTENT}>
<PageLayout.Header title={pack.name}>
{' '}
<Button variant={Button.VARIANT.PRIMARY} size={Button.SIZE.MEDIUM}>
Install
</Button>
</PageLayout.Header>
<Layout.Content>
{/* carousel component if we decide to use multiple images */}
<img src={noImagePlaceholder} alt="placeholder" height="250px" />
<h3>Description</h3>
<p>{pack.description}</p>
</Layout.Content>
<Layout.PageTools
css={css`
p,
li {
font-size: 0.85rem;
}
`}
>
<PageTools.Section>
<PageTools.Title>Ratings and installs</PageTools.Title>
{/* probably want a component for the ratings */}
<FeatherIcon
name="star"
size="2em"
<Tabs>
<PageLayout type={PageLayout.TYPE.RELATED_CONTENT}>
<PageLayout.Header
title={pack.name}
css={css`
border-bottom: none;
`}
>
<Button variant={Button.VARIANT.PRIMARY} size={Button.SIZE.MEDIUM}>
Install
</Button>
<Tabs.Bar
css={css`
color: gold;
fill: gold;
`}
/>
<FeatherIcon
name="star"
size="2em"
css={css`
color: gold;
fill: gold;
`}
/>
<FeatherIcon
name="star"
size="2em"
css={css`
color: gold;
fill: gold;
`}
/>
<FeatherIcon
name="star"
size="2em"
css={css`
color: gold;
fill: gold;
`}
/>
<FeatherIcon
name="star"
size="2em"
css={css`
color: lightgray;
fill: lightgray;
`}
/>
<p>37 ratings from 247 installs</p>
</PageTools.Section>
<PageTools.Section>
<PageTools.Title>How to use this pack</PageTools.Title>
<ol>
<li>
Sign up for a free New Relic account (or log in to your existing
account)
</li>
<li>Click the green install button above</li>
<li>
Follow the instructions to install the necessary instrumentation
to get the data used in this pack
</li>
<li>
Enjoy the dashboards, alerts, and appications filled with
insights on our environment and services.
</li>
</ol>
</PageTools.Section>
<PageTools.Section>
<PageTools.Title>Contributors</PageTools.Title>
<div
css={css`
display: flex;
justify-content: space-between;
flex: 5;
width: 60%;
margin-bottom: 0.5rem;
margin-top: 1rem;
`}
>
{exampleContributors.map(({ avatar_url }) => (
<Tabs.BarItem id="overview">Overview</Tabs.BarItem>
<Tabs.BarItem id="dependencies">Dependencies</Tabs.BarItem>
<Tabs.BarItem id="dashboards" count={3}>
Dashboards
</Tabs.BarItem>
<Tabs.BarItem id="alerts" count={4}>
Alerts
</Tabs.BarItem>
<Tabs.BarItem id="synthetics" disabled count={0}>
Synthetics checks
</Tabs.BarItem>
<Tabs.BarItem id="visualizations" disabled count={0}>
Visualizations
</Tabs.BarItem>
<Tabs.BarItem id="applications" count={1}>
Applications
</Tabs.BarItem>
</Tabs.Bar>
</PageLayout.Header>

<Layout.Content>
{/* carousel component if we decide to use multiple images */}
<Tabs.Pages>
<Tabs.Page id="overview">
<img
src={avatar_url}
key={avatar_url}
alt="github avatar"
css={css`
height: 35px;
border-radius: 50%;
`}
src={noImagePlaceholder}
alt="placeholder"
height="250px"
/>
))}
</div>
<p>
Want to contribute to this observability pack?{' '}
<ExternalLink href="#">Go to the repo</ExternalLink>
</p>
</PageTools.Section>
</Layout.PageTools>
</PageLayout>
<h3>Description</h3>
<p>{pack.description}</p>
</Tabs.Page>
<Tabs.Page id="dashboards">
{pack.dashboards.map((dashboard) => (
<>
<p>{dashboard.name}</p>
{dashboard.screenshots.map((screenshot, index) => (
<img
key={index}
alt="dashboard example"
src={screenshot}
css={css`
height: 200px;
margin: 1rem;
`}
/>
))}
</>
))}
</Tabs.Page>
</Tabs.Pages>
</Layout.Content>
<Layout.PageTools
css={css`
p,
li {
font-size: 0.85rem;
}
`}
>
<PageTools.Section>
<PageTools.Title>Ratings and installs</PageTools.Title>
{/* probably want a component for the ratings if we keep them */}
<FeatherIcon
name="star"
size="2em"
css={css`
color: gold;
fill: gold;
`}
/>
<FeatherIcon
name="star"
size="2em"
css={css`
color: gold;
fill: gold;
`}
/>
<FeatherIcon
name="star"
size="2em"
css={css`
color: gold;
fill: gold;
`}
/>
<FeatherIcon
name="star"
size="2em"
css={css`
color: gold;
fill: gold;
`}
/>
<FeatherIcon
name="star"
size="2em"
css={css`
color: lightgray;
fill: lightgray;
`}
/>
<p>37 ratings from 247 installs</p>
</PageTools.Section>
<PageTools.Section>
<PageTools.Title>How to use this pack</PageTools.Title>
<ol>
<li>
Sign up for a free New Relic account (or log in to your
existing account)
</li>
<li>Click the green install button above</li>
<li>
Follow the instructions to install the necessary
instrumentation to get the data used in this pack
</li>
<li>
Enjoy the dashboards, alerts, and appications filled with
insights on our environment and services.
</li>
</ol>
</PageTools.Section>
<PageTools.Section>
<PageTools.Title>Contributors</PageTools.Title>
<div
css={css`
display: flex;
justify-content: space-between;
flex: 5;
width: 60%;
margin-bottom: 0.5rem;
`}
>
{exampleContributors.map(({ avatar_url }) => (
<img
src={avatar_url}
key={avatar_url}
alt="github avatar"
css={css`
height: 35px;
border-radius: 50%;
`}
/>
))}
</div>
<p>
Want to contribute to this observability pack?{' '}
<ExternalLink href="#">Go to the repo</ExternalLink>
</p>
</PageTools.Section>
</Layout.PageTools>
</PageLayout>
</Tabs>
</>
);
};
Expand Down

0 comments on commit b00e56b

Please sign in to comment.