still on home page

elminhoemmanuel · Oct 19, 2021 · 2c81a8f · 2c81a8f
1 parent 740ccf4
commit 2c81a8f
Show file tree

Hide file tree

Showing 18 changed files with 449 additions and 1,893 deletions.
diff --git a/components/Data.js b/components/Data.js
@@ -0,0 +1,37 @@
+export const fivedays = [
+    {
+        id:1,
+        day:"Tommorrow",
+        pic:"/images/Sleet.png",
+        min:16,
+        max:11
+    },
+    {
+        id:2,
+        day:"Tue, 19 Oct",
+        pic:"/images/LightCloud.png",
+        min:16,
+        max:11
+    },
+    {
+        id:3,
+        day:"Tue, 19 Oct",
+        pic:"/images/Snow.png",
+        min:16,
+        max:11
+    },
+    {
+        id:4,
+        day:"Tue, 19 Oct",
+        pic:"/images/HeavyRain.png",
+        min:16,
+        max:11
+    },
+    {
+        id:5,
+        day:"Tue, 19 Oct",
+        pic:"/images/HeavyCloud.png",
+        min:16,
+        max:11
+    },
+]
diff --git a/components/LargeWeatherCard.js b/components/LargeWeatherCard.js
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const LargeWeatherCard = () => {
+    return (
+        <div>
+
+        </div>
+    )
+}
+
+export default LargeWeatherCard
diff --git a/components/LeftView.js b/components/LeftView.js
@@ -0,0 +1,49 @@
+import React from 'react'
+import PrimaryBtn from './PrimaryBtn'
+import { IoMdLocate } from "react-icons/io"
+import RoundBtn from './RoundBtn'
+
+const LeftView = () => {
+    return (
+        <div className="w-full h-full pt-6 pb-8 px-6 weatherbox relative">
+            <div className="absolute top-20">
+                <img className="cloudimg" src="/images/Cloud-background.png" alt="cloud background" />
+            </div>
+
+            <div className="flex items-center justify-between mb-4">
+                <PrimaryBtn
+                    btnText="Search for places"
+                    addStyle="bg-bgbtn text-maytext hover:bg-gray-600"
+                    clicked={() => { }}
+                />
+
+                <RoundBtn
+                    btnText={<IoMdLocate className="h-5 w-5 " />}
+                    addStyle="h-10 w-10 text-maytext bg-bgbtn hover:bg-gray-600"
+                    clicked={() => { }}
+                />
+            </div>
+
+            <div className="flex items-center justify-center flex-col ">
+                <div className="py-10">
+                    <img className="block h-38 w-38" src="/images/Shower.png" alt="main weather image" />
+                </div>
+
+                <h1 className="pb-6">
+                    <span className="font-bold text-6xl text-maytext">15</span>
+                    <span className="text-3xl text-maytext">°C</span>
+                </h1>
+
+                <h1 className="pb-6">
+                    <span className="font-bold text-2xl text-textleft">Shower</span>
+                </h1>
+
+                <p className="text-textleft text-sm pb-4">Today - Fri, 5 Jun</p>
+                <p className="text-textleft text-sm">Helsinki</p>
+
+            </div>
+        </div>
+    )
+}
+
+export default LeftView
diff --git a/components/PrimaryBtn.js b/components/PrimaryBtn.js
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const PrimaryBtn = ({ btnText , clicked, addStyle}) => {
+    return (
+        <button onClick={clicked} className={`focus:outline-none text-sm block shadow p-2 ${addStyle}`}>
+            {btnText}
+        </button>
+    )
+}
+
+export default PrimaryBtn
diff --git a/components/ProgressBar.js b/components/ProgressBar.js
@@ -0,0 +1,13 @@
+import React from 'react'
+
+const ProgressBar = ({percentage}) => {
+    // console.log(percentage)
+    return (
+        <div className='progress-bar'>
+            <div className='filler' style={{width: `${percentage}%`}}>
+            </div>
+        </div>
+    )
+}
+
+export default ProgressBar
diff --git a/components/RightView.js b/components/RightView.js
@@ -0,0 +1,116 @@
+import React from 'react'
+import RoundBtn from './RoundBtn'
+import { fivedays } from './Data'
+import SmallWeatherCard from './SmallWeatherCard'
+import ProgressBar from './ProgressBar'
+import { BsFillPlayFill } from "react-icons/bs"
+import Link from "next/link"
+
+const RightView = () => {
+    return (
+        <div className="px-6 md:px-12 lg:px-24 pt-6 pb-8 text-maytext">
+            <div className="flex justify-end items-center mb-6">
+                <RoundBtn
+                    btnText={<span className="h-5 w-5">°C</span>}
+                    addStyle="h-10 w-10 mr-2 text-black hover:text-white bg-gray-300 hover:bg-gray-600"
+                    clicked={() => { }}
+                />
+
+                <RoundBtn
+                    btnText={<span className="h-5 w-5">°F</span>}
+                    addStyle="h-10 w-10 bg-bgbtn hover:bg-gray-600 text-maytext"
+                    clicked={() => { }}
+                />
+            </div>
+
+            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 mb-10">
+                {
+                    fivedays.map(item => (
+                        <SmallWeatherCard item={item} key={item.id} />
+                    ))
+                }
+            </div>
+
+            <div className="">
+                <p className="text-lg md:text-xl mb-4">Today's Highlights</p>
+
+                <div className="grid gap-12 grid-cols-1 md:grid-cols-2 mb-16">
+
+                    {/* wind */}
+                    <div className="shadow-md bg-bggray text-maytext flex items-center justify-center flex-col p-6">
+                        <p className="text-sm">Wind status</p>
+
+                        <h1 className="py-5">
+                            <span className="font-bold text-4xl text-maytext">7</span>
+                            <span className="text-2xl text-maytext">mph</span>
+                        </h1>
+
+                        <div className="flex items-center">
+                            <RoundBtn
+                                btnText={<BsFillPlayFill className="h-4 w-4" />}
+                                addStyle="mr-2 pointer:events-none h-7 w-7 bg-bgbtn hover:bg-gray-600 text-maytext"
+                                clicked={() => { }}
+                            />
+                            <p className="text-xs">WSW</p>
+                        </div>
+                    </div>
+
+                    {/* humidity */}
+                    <div className="shadow-md bg-bggray text-maytext flex items-center justify-center flex-col p-6">
+                        <p className="text-sm">Humidity</p>
+
+                        <h1 className="py-5">
+                            <span className="font-bold text-4xl text-maytext">84</span>
+                            <span className="text-2xl text-maytext">%</span>
+                        </h1>
+
+                        <div className="">
+                            <div className="relative w-full p-2">
+                                <span className="absolute top-0 left-0 text-xs">0</span>
+                                <span className="absolute top-0 left-1/2 text-xs">50</span>
+                                <span className="absolute top-0 right-0 text-xs">100</span>
+                            </div>
+                            <ProgressBar width={80} />
+                            <div className="relative w-full p-2">
+                                <span className="absolute top-0 right-0 text-xs">%</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* visibility */}
+                    <div className="shadow-md bg-bggray text-maytext flex items-center justify-center flex-col p-6">
+                        <p className="text-sm">Visibility</p>
+
+                        <h1 className="py-5">
+                            <span className="font-bold text-4xl text-maytext">6,4</span>
+                            <span className="text-2xl text-maytext">miles</span>
+                        </h1>
+
+                        <div className="flex items-center">
+
+                        </div>
+                    </div>
+
+                    {/* air pressure */}
+                    <div className="shadow-md bg-bggray text-maytext flex items-center justify-center flex-col p-6">
+                        <p className="text-sm">Air Pressure</p>
+
+                        <h1 className="py-5">
+                            <span className="font-bold text-4xl text-maytext">998</span>
+                            <span className="text-2xl text-maytext">mb</span>
+                        </h1>
+
+                        <div className="flex items-center">
+
+                        </div>
+                    </div>
+                </div>
+
+                <p className="text-sm text-center">Coded by <Link href="https://github.com/elminhoemmanuel"><a className="font-bold">elminhoemmanuel</a></Link></p>
+            </div>
+
+        </div>
+    )
+}
+
+export default RightView
diff --git a/components/RoundBtn.js b/components/RoundBtn.js
@@ -0,0 +1,14 @@
+import React from 'react'
+
+const RoundBtn = ({ btnText , addStyle, clicked}) => {
+    return (
+        <button
+        onClick={clicked}
+        className={`focus:outline-none  flex items-center justify-center 
+        rounded-full ${addStyle}`}>
+            {btnText}
+        </button>
+    )
+}
+
+export default RoundBtn
diff --git a/components/SmallWeatherCard.js b/components/SmallWeatherCard.js
@@ -0,0 +1,21 @@
+import React from 'react'
+
+const SmallWeatherCard = ({ item }) => {
+    return (
+        <div className="shadow-md bg-bggray text-maytext h-42 p-5 flex items-center justify-center flex-col">
+            <p className="text-sm">{item.day}</p>
+
+            <div className="py-6 flex items-center justify-center">
+                <div><img className="h-12 w-12" src={item.pic} alt="weather image" /></div>
+            </div>
+
+            <div className="flex items-center justify-between">
+                <p className="text-sm">{item.max}°C&nbsp;&nbsp;&nbsp;&nbsp;</p>
+                <p className="text-sm">&nbsp;&nbsp;&nbsp;&nbsp;{item.min}°C</p>
+            </div>
+
+        </div>
+    )
+}
+
+export default SmallWeatherCard
diff --git a/next.config.js b/next.config.js
@@ -1,20 +1 @@
-const withLess = require("next-with-less");
-
-module.exports = withLess({
-  lessLoaderOptions: {
-    /* ... */
-    lessOptions: {
-      /* ... */
-      modifyVars: {
-        'primary-color': '#1E213A',
-        'text-selection-bg': '#1890FF',
-        'font-family': 'Raleway, sans-serif',
-        'menu-dark-bg': '#000000',
-        'menu-dark-inline-submenu-bg': 'rgba(255, 255, 255, 0.1)'
-        /* ... */
-      },
-    },
-  },
-  // reactStrictMode: true,
-});