From 9d01ffb27493085ee2a7f8e24f1908b332a34e76 Mon Sep 17 00:00:00 2001
From: Himanshu Aggarwal <aggarwah@mcmaster.ca>
Date: Sat, 19 Feb 2022 13:59:13 -0500
Subject: [PATCH] Add container, heading and basic search input
---
.../components/content/Container.js | 11 +++++++++++
src/cryptometrics/components/content/Main.js | 11 +++++++++++
.../components/inputs/SearchInput.js | 19 +++++++++++++++++++
.../components/titles/BoldGradientHeading.js | 11 +++++++++++
src/cryptometrics/pages/index.js | 15 ++++++++++++---
5 files changed, 64 insertions(+), 3 deletions(-)
create mode 100644 src/cryptometrics/components/content/Container.js
create mode 100644 src/cryptometrics/components/content/Main.js
create mode 100644 src/cryptometrics/components/inputs/SearchInput.js
create mode 100644 src/cryptometrics/components/titles/BoldGradientHeading.js
diff --git a/src/cryptometrics/components/content/Container.js b/src/cryptometrics/components/content/Container.js
new file mode 100644
index 0000000..b267876
--- /dev/null
+++ b/src/cryptometrics/components/content/Container.js
@@ -0,0 +1,11 @@
+import React from "react";
+
+function Container(props) {
+ return (
+ <div className="container mx-auto pt-8 p-2 sm:p-8 md:p-16">
+ {props.children}
+ </div>
+ );
+}
+
+export default Container;
diff --git a/src/cryptometrics/components/content/Main.js b/src/cryptometrics/components/content/Main.js
new file mode 100644
index 0000000..0dce157
--- /dev/null
+++ b/src/cryptometrics/components/content/Main.js
@@ -0,0 +1,11 @@
+import React from "react";
+
+function Main(props) {
+ return (
+ <main className="flex flex-col flex-auto overflow-auto min-h-screen pl-0 transition-[padding] duration-200 dark:bg-dark-800">
+ {props.children}
+ </main>
+ );
+}
+
+export default Main;
diff --git a/src/cryptometrics/components/inputs/SearchInput.js b/src/cryptometrics/components/inputs/SearchInput.js
new file mode 100644
index 0000000..32731bf
--- /dev/null
+++ b/src/cryptometrics/components/inputs/SearchInput.js
@@ -0,0 +1,19 @@
+import React from "react";
+import { SearchIcon } from "@heroicons/react/outline";
+
+function SearchInput() {
+ return (
+ <div className="relative">
+ <input
+ className="w-52 h-12 text-base font-semibold outline-none dark:text-white px-3 pr-10 rounded-2xl bg-dark-700"
+ placeholder="Search"
+ type="text"
+ ></input>
+ <button className="absolute top-0 right-3 bottom-0 w-6">
+ <SearchIcon className="w-6 h-6 dark:text-white" />
+ </button>
+ </div>
+ );
+}
+
+export default SearchInput;
diff --git a/src/cryptometrics/components/titles/BoldGradientHeading.js b/src/cryptometrics/components/titles/BoldGradientHeading.js
new file mode 100644
index 0000000..3a630ca
--- /dev/null
+++ b/src/cryptometrics/components/titles/BoldGradientHeading.js
@@ -0,0 +1,11 @@
+import React from "react";
+
+function BoldGradientHeading({ children }) {
+ return (
+ <h1 className="text-4xl font-extrabold font-poppins text-transparent bg-clip-text bg-gradient-to-r from-indigo-500 to-blue-500">
+ {children}
+ </h1>
+ );
+}
+
+export default BoldGradientHeading;
diff --git a/src/cryptometrics/pages/index.js b/src/cryptometrics/pages/index.js
index 0c3d620..0d03c27 100644
--- a/src/cryptometrics/pages/index.js
+++ b/src/cryptometrics/pages/index.js
@@ -1,4 +1,8 @@
import Head from "next/head";
+import Container from "../components/content/Container";
+import Main from "../components/content/Main";
+import SearchInput from "../components/inputs/SearchInput";
+import BoldGradientHeading from "../components/titles/BoldGradientHeading";
export default function Home() {
return (
@@ -8,9 +12,14 @@ export default function Home() {
<meta name="description" content="CryptoMetrics" />
<link rel="icon" href="/favicon.ico" />
</Head>
- <div className="text-4xl font-extrabold text-center mt-5">
- CryptoMetrics
- </div>
+ <Main>
+ <Container>
+ <div className="flex flex-row justify-between">
+ <BoldGradientHeading>CryptoMetrics</BoldGradientHeading>
+ <SearchInput />
+ </div>
+ </Container>
+ </Main>
</div>
);
}
--
GitLab