From f9e46b7cb8fdce434008b7df0837fcc72ec6da45 Mon Sep 17 00:00:00 2001 From: "Alejandro E. Rendon" Date: Sat, 6 Mar 2021 20:01:01 -0500 Subject: [PATCH] Added CSS framework --- package.json | 2 ++ src/components/SiteBar.js | 38 +++++++++++++++++++++++++++++++++++ src/components/header.js | 42 --------------------------------------- src/components/layout.js | 41 +++++++++++--------------------------- src/data/speakers.json | 7 +++++++ src/pages/index.js | 6 ++++-- 6 files changed, 63 insertions(+), 73 deletions(-) create mode 100644 src/components/SiteBar.js delete mode 100644 src/components/header.js diff --git a/package.json b/package.json index e7ebec9..bb5935b 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "version": "0.1.0", "author": "Kyle Mathews ", "dependencies": { + "bootstrap": "^4.6.0", "gatsby": "^2.32.8", "gatsby-image": "^2.11.0", "gatsby-plugin-gatsby-cloud": "^1.0.2", @@ -18,6 +19,7 @@ "gatsby-transformer-sharp": "^2.12.0", "prop-types": "^15.7.2", "react": "^16.12.0", + "react-bootstrap": "^1.5.1", "react-dom": "^16.12.0", "react-helmet": "^6.1.0" }, diff --git a/src/components/SiteBar.js b/src/components/SiteBar.js new file mode 100644 index 0000000..a2a0724 --- /dev/null +++ b/src/components/SiteBar.js @@ -0,0 +1,38 @@ +import React from 'react'; +import { Navbar, Nav, NavDropdown } from 'react-bootstrap'; + +import 'bootstrap/dist/css/bootstrap.min.css'; + +const SiteBar = () => { + return ( + + React-Bootstrap + + + + + + + ); +}; + +export default SiteBar; diff --git a/src/components/header.js b/src/components/header.js deleted file mode 100644 index 314affc..0000000 --- a/src/components/header.js +++ /dev/null @@ -1,42 +0,0 @@ -import { Link } from 'gatsby'; -import PropTypes from 'prop-types'; -import React from 'react'; - -const Header = ({ siteTitle }) => ( -
-
-

- - {siteTitle} - -

-
-
-); - -Header.propTypes = { - siteTitle: PropTypes.string, -}; - -Header.defaultProps = { - siteTitle: ``, -}; - -export default Header; diff --git a/src/components/layout.js b/src/components/layout.js index 2a3683e..cade768 100644 --- a/src/components/layout.js +++ b/src/components/layout.js @@ -7,43 +7,26 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { useStaticQuery, graphql } from 'gatsby'; +import { Container } from 'react-bootstrap'; -import Header from './header'; -import './layout.css'; +import SiteBar from './SiteBar'; const Layout = ({ children }) => { - const data = useStaticQuery(graphql` - query SiteTitleQuery { - site { - siteMetadata { - title - } - } - } - `); - return ( <> -
-
+ +
{children}
+ +
-
{children}
-
- © {new Date().getFullYear()}, Built with - {` `} - Gatsby -
-
+ © {new Date().getFullYear()}, Built with + {` `} + Gatsby + ); }; diff --git a/src/data/speakers.json b/src/data/speakers.json index c16cf69..e08d24f 100644 --- a/src/data/speakers.json +++ b/src/data/speakers.json @@ -12,5 +12,12 @@ "description": "Western Digital 1TB WD10EZEX Caviar Blue 3.5 inch 7200rpm internal hard drive. With this drive you get the capacity and the performance you demand to build a high speed, high capacity modern desktop computer. The WD Blue 1tb gives your system the storage it needs and the speed you want - with 1 terabyte of capacity to store all your files, videos, and pictures. Features 64MB cache and a 3.5 inch form factor. This 1 TB SATA HDD has the room you need to store gigabytes upon gigabytes of high definition media, and the read and write speeds to easily access and manage it all.", "image": "https://s.yimg.com/aah/outletpc/western-digital-wd10ezex-1tb-sata-iii-3-5-desktop-hard-drive-58.jpg", "price": "43.99" + }, + { + "id": "arendon-diosa", + "name": "Western Digital WD10EZEX 1TB Blue 7200RPM SATA 6.0Gb/s 3.5inch Hard Drive", + "description": "Western Digital 1TB WD10EZEX Caviar Blue 3.5 inch 7200rpm internal hard drive. With this drive you get the capacity and the performance you demand to build a high speed, high capacity modern desktop computer. The WD Blue 1tb gives your system the storage it needs and the speed you want - with 1 terabyte of capacity to store all your files, videos, and pictures. Features 64MB cache and a 3.5 inch form factor. This 1 TB SATA HDD has the room you need to store gigabytes upon gigabytes of high definition media, and the read and write speeds to easily access and manage it all.", + "image": "https://s.yimg.com/aah/outletpc/western-digital-wd10ezex-1tb-sata-iii-3-5-desktop-hard-drive-58.jpg", + "price": "43.99" } ] \ No newline at end of file diff --git a/src/pages/index.js b/src/pages/index.js index 2dac793..e3d677a 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -2,11 +2,13 @@ import React from 'react'; import { Link } from 'gatsby'; import { useIntl } from 'gatsby-plugin-intl'; +import Layout from '../components/layout'; + const IndexPage = () => { const intl = useIntl(); return ( - <> +
    • @@ -21,7 +23,7 @@ const IndexPage = () => {

{intl.formatMessage({ id: 'index.title' })}

- + ); };