From aac2b0d41b85c1ed9fbf01d13f0b9dbc03d9fe73 Mon Sep 17 00:00:00 2001 From: NCanggoro Date: Wed, 30 Aug 2023 16:46:33 +0700 Subject: [PATCH] add Recent places --- src/app.css | 133 ++---------------- src/components/Header/index.tsx | 8 +- src/components/Header/style.css | 122 ++++++++++++++++ src/components/Separator/WithAnchor/index.tsx | 20 +++ src/components/Separator/WithAnchor/style.css | 4 + src/components/index.ts | 4 +- src/datas/home.json | 124 ++++++++++++++++ src/index.css | 2 +- src/layouts/Default/Default.tsx | 4 +- src/pages/Home/index.tsx | 63 ++++++++- src/pages/Home/style.css | 4 + tailwind.config.js | 32 +++++ 12 files changed, 387 insertions(+), 133 deletions(-) create mode 100644 src/components/Header/style.css create mode 100644 src/components/Separator/WithAnchor/index.tsx create mode 100644 src/components/Separator/WithAnchor/style.css create mode 100644 src/datas/home.json create mode 100644 src/pages/Home/style.css diff --git a/src/app.css b/src/app.css index 441d105..99f19f0 100644 --- a/src/app.css +++ b/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 + } +} diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 2039d97..5d3a5c8 100644 --- a/src/components/Header/index.tsx +++ b/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() { Best places Discover Trending Places - Lists Stories - News + News / Events Forum + Sign in ) diff --git a/src/components/Header/style.css b/src/components/Header/style.css new file mode 100644 index 0000000..be29f71 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/components/Separator/WithAnchor/index.tsx b/src/components/Separator/WithAnchor/index.tsx new file mode 100644 index 0000000..89baf15 --- /dev/null +++ b/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 ( +
+

+ {props.pageName} +

+ View all +
+ ) +} + +export default SeparatorWithAnchor; \ No newline at end of file diff --git a/src/components/Separator/WithAnchor/style.css b/src/components/Separator/WithAnchor/style.css new file mode 100644 index 0000000..9b60797 --- /dev/null +++ b/src/components/Separator/WithAnchor/style.css @@ -0,0 +1,4 @@ +.divider { + border-bottom-width: 1px; + padding-bottom: 3px; +} \ No newline at end of file diff --git a/src/components/index.ts b/src/components/index.ts index 4dbc380..bb2ed81 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,5 +1,7 @@ import Header from "./Header"; +import SeparatorWithAnchor from "./Separator/WithAnchor"; export { - Header + Header, + SeparatorWithAnchor } \ No newline at end of file diff --git a/src/datas/home.json b/src/datas/home.json new file mode 100644 index 0000000..6f5320f --- /dev/null +++ b/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 + } + ] +} \ No newline at end of file diff --git a/src/index.css b/src/index.css index 36aaea7..ffdec4b 100644 --- a/src/index.css +++ b/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; diff --git a/src/layouts/Default/Default.tsx b/src/layouts/Default/Default.tsx index b26f75c..8245705 100644 --- a/src/layouts/Default/Default.tsx +++ b/src/layouts/Default/Default.tsx @@ -9,7 +9,9 @@ function DefaultLayout({ children }: ChildrenProps) { return ( <>
- {children} +
+ {children} +
) } diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index 2acc3aa..f01c710 100644 --- a/src/pages/Home/index.tsx +++ b/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 ( -
+
+ + {/* RECENTLY ADDED SECTION */} +
+ + {data.new_places.map((x: NewPlaces) => ( +
+ {/*

{x.id}

*/} +
+ {x.name} +
+
+

{x.name}

+

{x.location}

+
+
+
+

{x.critic_rating}

+
+
+
+
+

Critic Score ({x.critic_voters})

+
+
+
+

{x.user_rating}

+
+
+
+
+

User score ({x.user_voters})

+
+
+ ))} +
+ {/* END RECENTLY ADDED SECTION */} + + {/* START RECENT NEWS / EVENT SECTION */} +
+ + +
+ {/* END RECENT NEWS / EVENT SECTION */} + diff --git a/src/pages/Home/style.css b/src/pages/Home/style.css new file mode 100644 index 0000000..a38fd6b --- /dev/null +++ b/src/pages/Home/style.css @@ -0,0 +1,4 @@ +.main-content { + padding: 20px 30px; + text-align: left; +} \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index 6bdcac8..382fe75 100644 --- a/tailwind.config.js +++ b/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: [],