add Recent places

src/app.css

@@ -1,137 +1,16 @@
+@tailwind components;
+
 /* #app {
   
 } */
 
-@media screen and (max-width: 768px) {
-  a.navLink {
-    font-size: 12px;
-    padding: 0px 20px;
-  }
-}
-
-@media screen and (max-width: 488px) {
-  a.navLink{
-    /* display: none; */
-    margin-top: 10px;
-    width: 100%;
-    padding: 0;
-    border-bottom: 1px solid white;
-    padding: 10px 0
-  }
-
-  div.nav-container {
-    padding: 0 20px;
-    height: 100vh;
-    /* align-items: start; */
-    justify-content: start;
-    flex-direction: column;
-  }
-
-  div.nav-container-disabled {
-    padding: 4px;
-    height: 0;
-  }
-
-  a.navLink-disabled {
-    display: none;
-  }
-
-  form.search-input {
-    display: none;
-    margin-left: 0;
-  }
-
-  button.dropdown-menu {
-    display: block;
-  }
-
-  .search-input-dropdown {
-    margin-right: 10px;
-    display: block !important;
-  }
-
-  h1.title-dropdown {
-    display: none;
-  }
-
-  a.navLink:hover{
-    border-bottom-width: 1px;
-    margin-bottom: 0px;
-  }
-}
-
-@media screen and (max-width: 390px){
-  input.text-input-search {
-    width: 230px;
-  }
-}
-
-.dropdown-menu {
-  display: none;
-}
-
-.search-input {
-  margin-left: auto;
-}
-
-label {
-  position: relative;
-}
-
-label:before {
-  content: "";
-  position: absolute;
-  left: 10px;
-  top: 0;
-  bottom: 0;
-  width: 18px;
-  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' width='18' height='18' viewBox='0 0 25 25' fill-rule='evenodd'%3E%3Cpath d='M16.036 18.455l2.404-2.405 5.586 5.587-2.404 2.404zM8.5 2C12.1 2 15 4.9 15 8.5S12.1 15 8.5 15 2 12.1 2 8.5 4.9 2 8.5 2zm0-2C3.8 0 0 3.8 0 8.5S3.8 17 8.5 17 17 13.2 17 8.5 13.2 0 8.5 0zM15 16a1 1 0 1 1 2 0 1 1 0 1 1-2 0'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
-}
-
-.text-input-search {
-  padding: 12px 20px 12px 40px;
-  border-radius: 12px;
-  width: 325px; 
-  font-size: 1em; 
-  background-color: #4b4b4b;
-}
-
-.title {
-  font-size: 32px;
-}
-
 .content {
-  max-width: 1280px;
+  max-width: 1440px;
   margin: 0 auto;
   padding: 1rem;
   text-align: center;
 }
 
-.navLink {
-  padding: 0px 30px;
-  font-size: 14px;
-}
-
-
-.nav-container {
-  background-color: #4b4b4b;
-  padding: 10px 0;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  /* display: 'inline-block'; 
-  max-width: '100%'; 
-  text-align: 'center'; */
-}
-
-.navLink:hover{
-  border-bottom-width: 2px;
-  margin-bottom: -2px;
-}
-
-
 .logo {
   height: 6em;
   padding: 1.5em;
@@ -150,3 +29,9 @@ label:before {
 .read-the-docs {
   color: #888;
 }
+
+@layer components {
+  .text-prime {
+    @apply text-secondary
+  }
+}

src/components/Header/index.tsx

@@ -1,5 +1,6 @@
 import React from "preact/compat";
 import { useState } from "preact/hooks";
+import './style.css';
 
 
 function Header() {
@@ -20,7 +21,8 @@ function Header() {
     document.body.style.overflow = "hidden"
     
     if(dropdown) {
-      document.body.style.overflow = "scroll";
+      document.body.style.overflowX = "hidden";
+      document.body.style.overflowY = "scroll";
     }
     setDropdown(!dropdown)
   }
@@ -51,10 +53,10 @@ function Header() {
         <a href="#" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Best places</a>
         <a href="#" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Discover</a>
         <a href="#" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Trending Places</a>
-        <a href="#" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Lists</a>
         <a href="#" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Stories</a>
-        <a href="#" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>News</a>
+        <a href="#" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>News / Events</a>
         <a href="#" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Forum</a>
+        <a href="#" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Sign in</a>
       </div>
     </header>
   )

src/components/Header/style.css

@@ -0,0 +1,122 @@
+@media screen and (max-width: 768px) {
+  a.navLink {
+    font-size: 12px;
+    padding: 0px 20px;
+  }
+}
+
+@media screen and (max-width: 488px) {
+  a.navLink{
+    /* display: none; */
+    margin-top: 10px;
+    width: 100%;
+    padding: 0;
+    border-bottom: 1px solid white;
+    padding: 10px 0
+  }
+
+  div.nav-container {
+    padding: 0 20px;
+    height: 100vh;
+    /* align-items: start; */
+    justify-content: start;
+    flex-direction: column;
+  }
+
+  div.nav-container-disabled {
+    padding: 4px;
+    height: 0;
+  }
+
+  a.navLink-disabled {
+    display: none;
+  }
+
+  form.search-input {
+    display: none;
+    margin-left: 0;
+  }
+
+  button.dropdown-menu {
+    display: block;
+  }
+
+  .search-input-dropdown {
+    margin-right: 10px;
+    display: block !important;
+  }
+
+  h1.title-dropdown {
+    display: none;
+  }
+
+  a.navLink:hover{
+    border-bottom-width: 1px;
+    margin-bottom: 0px;
+  }
+}
+
+@media screen and (max-width: 390px){
+  input.text-input-search {
+    width: 230px;
+  }
+}
+
+.dropdown-menu {
+  display: none;
+}
+
+.search-input {
+  margin-left: auto;
+}
+
+label {
+  position: relative;
+}
+
+label:before {
+  content: "";
+  position: absolute;
+  left: 10px;
+  top: 0;
+  bottom: 0;
+  width: 18px;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' width='18' height='18' viewBox='0 0 25 25' fill-rule='evenodd'%3E%3Cpath d='M16.036 18.455l2.404-2.405 5.586 5.587-2.404 2.404zM8.5 2C12.1 2 15 4.9 15 8.5S12.1 15 8.5 15 2 12.1 2 8.5 4.9 2 8.5 2zm0-2C3.8 0 0 3.8 0 8.5S3.8 17 8.5 17 17 13.2 17 8.5 13.2 0 8.5 0zM15 16a1 1 0 1 1 2 0 1 1 0 1 1-2 0'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.text-input-search {
+  padding: 12px 20px 12px 40px;
+  border-radius: 12px;
+  width: 325px; 
+  font-size: 1em; 
+  text-transform: lowercase;
+  background-color: #4b4b4b;
+}
+
+.title {
+  font-size: 32px;
+}
+
+.navLink {
+  padding: 0px 30px;
+  font-size: 14px;
+}
+
+
+.nav-container {
+  background-color: #4b4b4b;
+  padding: 10px 0;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  /* display: 'inline-block'; 
+  max-width: '100%'; 
+  text-align: 'center'; */
+}
+
+.navLink:hover{
+  border-bottom-width: 2px;
+  margin-bottom: -2px;
+}

src/components/Separator/WithAnchor/index.tsx

@@ -0,0 +1,20 @@
+import './style.css';
+
+type SeparatorProps = {
+  pageName: String,
+  pageLink: string,
+  secondLink: string
+}
+
+function SeparatorWithAnchor(props: SeparatorProps) {
+  return (
+    <div class={"flex flex-row justify-between divider mb-2"}>
+      <h1 className="text-sm font-bold" style={{ textTransform: 'uppercase' }}>
+        <a href={props.pageLink}>{props.pageName}</a>
+      </h1>
+      <a href={props.secondLink} className={"text-sm"}>View all</a>
+    </div>
+  )
+}
+
+export default SeparatorWithAnchor;

src/components/Separator/WithAnchor/style.css

@@ -0,0 +1,4 @@
+.divider {
+  border-bottom-width: 1px; 
+  padding-bottom: 3px;
+}

src/components/index.ts

@@ -1,5 +1,7 @@
 import Header from "./Header";
+import SeparatorWithAnchor from "./Separator/WithAnchor";
 
 export {
-  Header
+  Header,
+  SeparatorWithAnchor
 }

src/datas/home.json

@@ -0,0 +1,124 @@
+{
+  "new_places": [
+    {
+      "id": 1,
+      "name": "Warung Sate Kambing",
+      "thumbnail": "https://fatahilaharis.files.wordpress.com/2017/07/wp-1499292117215.jpeg",
+      "location": "Bandung",
+      "critic_rating": 78,
+      "critic_voters": 10,
+      "user_rating": 85,
+      "user_voters": 180
+    },
+    {
+      "id": 2,
+      "name": "Pantai Balekambang",
+      "thumbnail": "https://www.nativeindonesia.com/foto/pantai-balekambang/Lokasi-Pura-Yang-Berada-Di-Atas-Pulau-Karang.jpg",
+      "location": "Malang",
+      "critic_rating": 82,
+      "critic_voters": 14,
+      "user_rating": 90,
+      "user_voters": 250
+    },
+    {
+      "id": 3,
+      "name": "Bebek Sinjay",
+      "thumbnail": "https://i0.wp.com/harga.web.id/wp-content/uploads/bebek-sinjay-surabaya-1.jpg?resize=680%2C300&ssl=1",
+      "location": "Surabaya",
+      "critic_rating": 70,
+      "critic_voters": 8,
+      "user_rating": 92,
+      "user_voters": 320
+    },
+    {
+      "id": 4,
+      "name": "Taman Pelangi",
+      "thumbnail": "https://tempat.org/wp-content/uploads/2016/11/57488321_255018015317182_1189210435487115990_n.jpg",
+      "location": "Surabaya",
+      "critic_rating": 75,
+      "critic_voters": 6,
+      "user_rating": 82,
+      "user_voters": 135
+    },
+    {
+      "id": 5,
+      "thumbnail": "https://ak-d.tripcdn.com/images/1i61t22348mz2uz9cB9FF.jpg?proc=source/trip",
+      "name": "Ragunan Zoo",
+      "location": "Jakarta",
+      "critic_rating": 88,
+      "critic_voters": 20,
+      "user_rating": 76,
+      "user_voters": 190
+    },
+    {
+      "id": 6,
+      "name": "Sate Lilit Bali",
+      "thumbnail": "https://lh3.googleusercontent.com/p/AF1QipNX3DCZxF8MOuyptvxPGfTT4-KNw0BTEqYqeled=s680-w680-h510",
+      "location": "Denpasar",
+      "critic_rating": 83,
+      "critic_voters": 12,
+      "user_rating": 88,
+      "user_voters": 210
+    },
+    {
+      "id": 7,
+      "name": "WR. Sate Lilit Men Ari",
+      "thumbnail": "https://lh3.googleusercontent.com/p/AF1QipNp3pWP60owDXDxvK-w8RltH3zStr25iHmrWCJU=s680-w680-h510",
+      "location": "Pekalongan",
+      "critic_rating": 79,
+      "critic_voters": 11,
+      "user_rating": 87,
+      "user_voters": 260
+    },
+    {
+      "id": 8,
+      "name": "Kuntum Farmfield",
+      "thumbnail": "https://inisumedang.com/wp-content/uploads/2023/07/WhatsApp-Image-2023-06-30-at-07.17.53.jpeg",
+      "location": "Bogor",
+      "critic_rating": 68,
+      "critic_voters": 9,
+      "user_rating": 75,
+      "user_voters": 150
+    },
+    {
+      "id": 11,
+      "name": "Soto Semarang Pak joned",
+      "thumbnail": "https://lh3.googleusercontent.com/p/AF1QipNX_IMxyciGr0iusXMSkzGMx3uE266xNkRsjUVj=s680-w680-h510",
+      "location": "Semarang",
+      "critic_rating": 74,
+      "critic_voters": 7,
+      "user_rating": 81,
+      "user_voters": 170
+    },
+    {
+      "id": 7,
+      "name": "WR. Sate Lilit Men Ari",
+      "thumbnail": "https://lh3.googleusercontent.com/p/AF1QipNp3pWP60owDXDxvK-w8RltH3zStr25iHmrWCJU=s680-w680-h510",
+      "location": "Pekalongan",
+      "critic_rating": 79,
+      "critic_voters": 11,
+      "user_rating": 87,
+      "user_voters": 260
+    },
+    {
+      "id": 8,
+      "name": "Kuntum Farmfield",
+      "thumbnail": "https://inisumedang.com/wp-content/uploads/2023/07/WhatsApp-Image-2023-06-30-at-07.17.53.jpeg",
+      "location": "Bogor",
+      "critic_rating": 68,
+      "critic_voters": 9,
+      "user_rating": 75,
+      "user_voters": 150
+    },
+    {
+      "id": 11,
+      "name": "Soto Semarang Pak joned",
+      "thumbnail": "https://lh3.googleusercontent.com/p/AF1QipNX_IMxyciGr0iusXMSkzGMx3uE266xNkRsjUVj=s680-w680-h510",
+      "location": "Semarang",
+      "critic_rating": 74,
+      "critic_voters": 7,
+      "user_rating": 81,
+      "user_voters": 170
+    }
+  ]
+}

src/index.css

@@ -1,6 +1,6 @@
 @tailwind base;
-@tailwind components;
 @tailwind utilities;
+/* @tailwind component; */
 
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;

src/layouts/Default/Default.tsx

@@ -9,7 +9,9 @@ function DefaultLayout({ children }: ChildrenProps) {
   return (
     <>
       <Header />
+      <main>
         {children}
+      </main>
     </>
   )
 }

src/pages/Home/index.tsx

@@ -2,6 +2,20 @@ import preactLogo from '../../assets/preact.svg';
 import viteLogo from '/vite.svg'
 import { useState } from "preact/hooks";
 import { DefaultLayout } from '../../layouts/';
+import { SeparatorWithAnchor } from '../../components';
+import data from '../../datas/home.json';
+import './style.css';
+
+type NewPlaces = {
+  id: Number,
+  name: string,
+  thumbnail: string,
+  location: string,
+  critic_rating: Number,
+  critic_voters: Number,
+  user_rating: Number,
+  user_voters: Number
+}
 
 function Home() {
   const [count, setCount] = useState(0)
@@ -9,7 +23,51 @@ function Home() {
 
   return (
     <DefaultLayout>
-      <div className="content">
+      <div className="content main-content mt-3">
+        
+        {/* RECENTLY ADDED SECTION */}
+        <section about={"Recently added places"} className={'mt-3'}>
+          <SeparatorWithAnchor pageLink='#' pageName='recently added' secondLink='#' />
+          {data.new_places.map((x: NewPlaces) => (
+            <div style={{ padding: '10px 1% 15px', display: 'inline-block', margin: ' 0 0 15px', verticalAlign: 'top', width: '16.6%' }}>
+              {/* <p>{x.id}</p> */}
+              <div style={{ width: 200, height: 200, overflow: 'hidden' }}>
+                <img alt={x.name} src={x.thumbnail} style={{ width: '100%', height: '100%' }} />
+              </div>
+              <div style={{ textAlign: 'left', borderBottomWidth: 1 }}>
+                <p>{x.name}</p>
+                <p>{x.location}</p>
+              </div>
+              <div className={"flex flex-row"}>
+                <div>
+                  <p>{x.critic_rating}</p>
+                  <div style={{ height: 4, width: 40, backgroundColor: "#72767d" }}>
+                    <div style={{ height: 4, width: `${x.critic_rating}%`, backgroundColor: 'green' }} />
+                  </div>
+                </div>
+                <p>Critic Score ({x.critic_voters})</p>
+              </div>
+              <div className={"flex flex-row"}>
+                <div>
+                  <p>{x.user_rating}</p>
+                  <div style={{ height: 4, width: 40, backgroundColor: "#72767d" }}>
+                    <div style={{ height: 4, width: `${x.user_rating}%`, backgroundColor: 'green' }} />
+                  </div>
+                </div>
+                <p>User score ({x.user_voters})</p>
+              </div>
+            </div>
+          ))}
+        </section>
+        {/* END RECENTLY ADDED SECTION */}
+
+        {/* START RECENT NEWS / EVENT SECTION */}
+        <section>
+          <SeparatorWithAnchor pageLink='#' pageName='Recent News / Event' secondLink='#' />
+
+        </section>
+        {/* END RECENT NEWS / EVENT SECTION */}
+
         <div className="flex flex-row">
           <a href="https://vitejs.dev" target="_blank">
             <img src={viteLogo} class="logo" alt="Vite logo" />
@@ -30,8 +88,7 @@ function Home() {
         <p class="read-the-docs">
           Click on the Vite and Preact logos to learn more
         </p>
-
+        <h1 className="text-3xl font-bold underline text-prime" >
-        <h1 className="text-3xl font-bold underline">
           Hello world!
         </h1>
       </div>

src/pages/Home/style.css

@@ -0,0 +1,4 @@
+.main-content {
+  padding: 20px 30px;
+  text-align: left;
+}

tailwind.config.js

@@ -2,6 +2,38 @@
 export default {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   theme: {
+    colors: {
+      transparent: 'transparent',
+      current: 'currentColor',
+      primary: '#3d3d3d',
+      secondary: '#4b4b4b'
+    },
+    fontSize: {
+      xs: ['0.75rem', { lineHeight: '1rem' }],
+      sm: ['0.875rem', { lineHeight: '1.25rem' }],
+      base: ['1rem', { lineHeight: '1.5rem' }],
+      lg: ['1.125rem', { lineHeight: '1.75rem' }],
+      xl: ['1.25rem', { lineHeight: '1.75rem' }],
+      '2xl': ['1.5rem', { lineHeight: '2rem' }],
+      '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
+      '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
+      '5xl': ['3rem', { lineHeight: '1' }],
+      '6xl': ['3.75rem', { lineHeight: '1' }],
+      '7xl': ['4.5rem', { lineHeight: '1' }],
+      '8xl': ['6rem', { lineHeight: '1' }],
+      '9xl': ['8rem', { lineHeight: '1' }],
+    },
+    fontWeight: {
+      thin: '100',
+      extralight: '200',
+      light: '300',
+      normal: '400',
+      medium: '500',
+      semibold: '600',
+      bold: '700',
+      extrabold: '800',
+      black: '900',
+    },
     extend: {},
   },
   plugins: [],