home page set up with nav bar
This commit is contained in:
talksik
Generated
+5
@@ -3122,6 +3122,11 @@
|
|||||||
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
|
||||||
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
|
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
|
||||||
},
|
},
|
||||||
|
"bootstrap": {
|
||||||
|
"version": "4.5.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.2.tgz",
|
||||||
|
"integrity": "sha512-vlGn0bcySYl/iV+BGA544JkkZP5LB3jsmkeKLFQakCOwCM3AOk7VkldBz4jrzSe+Z0Ezn99NVXa1o45cQY4R6A=="
|
||||||
|
},
|
||||||
"brace-expansion": {
|
"brace-expansion": {
|
||||||
"version": "1.1.11",
|
"version": "1.1.11",
|
||||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
|
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
|
||||||
|
|||||||
@@ -6,6 +6,7 @@
|
|||||||
"@testing-library/jest-dom": "^4.2.4",
|
"@testing-library/jest-dom": "^4.2.4",
|
||||||
"@testing-library/react": "^9.5.0",
|
"@testing-library/react": "^9.5.0",
|
||||||
"@testing-library/user-event": "^7.2.1",
|
"@testing-library/user-event": "^7.2.1",
|
||||||
|
"bootstrap": "^4.5.2",
|
||||||
"node-sass": "^4.14.1",
|
"node-sass": "^4.14.1",
|
||||||
"react": "^16.13.1",
|
"react": "^16.13.1",
|
||||||
"react-dom": "^16.13.1",
|
"react-dom": "^16.13.1",
|
||||||
|
|||||||
@@ -24,6 +24,13 @@
|
|||||||
work correctly both with client-side routing and a non-root public URL.
|
work correctly both with client-side routing and a non-root public URL.
|
||||||
Learn how to configure a non-root public URL by running `npm run build`.
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
-->
|
-->
|
||||||
|
|
||||||
|
<!-- Boostrap Grid System Only -->
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap-grid.min.css"
|
||||||
|
/>
|
||||||
|
|
||||||
<title>React App</title>
|
<title>React App</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
@@ -46,9 +46,43 @@ export default function Home() {
|
|||||||
class ComponentSelection extends React.Component {
|
class ComponentSelection extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div class="wrapper">
|
||||||
<h2>alright we are in the component selection home page</h2>
|
<div class="nav">
|
||||||
<NavLink to="/dashboard">dashboard</NavLink>
|
<ul>
|
||||||
|
<li>
|
||||||
|
<NavLink activeClassName="active" to="/">
|
||||||
|
Home
|
||||||
|
</NavLink>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<NavLink activeClassName="active" to="/dashboard">
|
||||||
|
Dashboard
|
||||||
|
</NavLink>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<NavLink activeClassName="active" to="/start">
|
||||||
|
Get Started
|
||||||
|
</NavLink>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<NavLink activeClassName="active" to="/docs">
|
||||||
|
Docs
|
||||||
|
</NavLink>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<NavLink activeClassName="active" to="/pricing">
|
||||||
|
Pricing
|
||||||
|
</NavLink>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pages">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">Rameelo</div>
|
||||||
|
</div>
|
||||||
|
<div class="card"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1 +1,42 @@
|
|||||||
@import '../../styles/index';
|
@import '../../styles/index';
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
@extend %flex;
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
@extend %flex;
|
||||||
|
padding-inline-start: 0 !important;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: stretch;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-right: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none !important;
|
||||||
|
color: $secondary-text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
padding: 7px 10px;
|
||||||
|
background-color: $primary-color;
|
||||||
|
border-radius: 100px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
div .pages {
|
||||||
|
@extend %flex;
|
||||||
|
|
||||||
|
margin: 20px;
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
|
.card {
|
||||||
|
height: 200px;
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -2,6 +2,9 @@ $primary-background: #fbf6f0;
|
|||||||
$primary-text: #3f4254;
|
$primary-text: #3f4254;
|
||||||
$secondary-text: #b5b5c3;
|
$secondary-text: #b5b5c3;
|
||||||
|
|
||||||
|
$primary-color: #0bb7af;
|
||||||
|
$white: white;
|
||||||
|
|
||||||
body {
|
body {
|
||||||
color: $primary-text;
|
color: $primary-text;
|
||||||
background-color: $primary-background;
|
background-color: $primary-background;
|
||||||
|
|||||||
@@ -1,5 +1,13 @@
|
|||||||
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap');
|
||||||
|
|
||||||
html {
|
body {
|
||||||
font-family: 'Fira Sans', sans-serif;
|
font-family: 'Fira Sans', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: $primary-text;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,2 +1,3 @@
|
|||||||
@import './colors';
|
@import './colors';
|
||||||
@import './fonts';
|
@import './fonts';
|
||||||
|
@import './main';
|
||||||
|
|||||||
@@ -0,0 +1,21 @@
|
|||||||
|
// Common styles for all components
|
||||||
|
|
||||||
|
%flex {
|
||||||
|
display: flex !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
max-width: 1140px;
|
||||||
|
margin: 20px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 25px;
|
||||||
|
margin: 10px;
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
@extend %flex;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user