From 577399407c3f8e309218e5a85cdcd6c4887029e5 Mon Sep 17 00:00:00 2001 From: NCanggoro Date: Fri, 1 Sep 2023 20:46:51 +0700 Subject: [PATCH] rough layout for home --- src/components/Header/style.css | 4 +- src/components/Separator/WithAnchor/index.tsx | 6 +- src/datas/critics_users_best_pick.json | 102 ++++++++++++++ src/datas/popular.json | 70 +++++++++ src/datas/popular_user_reviews.json | 43 ++++++ src/datas/recent_news_event.json | 46 ++++++ src/index.css | 2 +- src/layouts/Default/Default.tsx | 32 +++++ src/pages/Home/index.tsx | 133 ++++++++++++++++-- src/pages/Home/style.css | 31 ++++ 10 files changed, 456 insertions(+), 13 deletions(-) create mode 100644 src/datas/critics_users_best_pick.json create mode 100644 src/datas/popular.json create mode 100644 src/datas/popular_user_reviews.json create mode 100644 src/datas/recent_news_event.json diff --git a/src/components/Header/style.css b/src/components/Header/style.css index be29f71..40d16e8 100644 --- a/src/components/Header/style.css +++ b/src/components/Header/style.css @@ -90,7 +90,7 @@ label:before { width: 325px; font-size: 1em; text-transform: lowercase; - background-color: #4b4b4b; + background-color: #2f3136; } .title { @@ -104,7 +104,7 @@ label:before { .nav-container { - background-color: #4b4b4b; + background-color: #2f3136; padding: 10px 0; width: 100%; display: flex; diff --git a/src/components/Separator/WithAnchor/index.tsx b/src/components/Separator/WithAnchor/index.tsx index 89baf15..4efce0d 100644 --- a/src/components/Separator/WithAnchor/index.tsx +++ b/src/components/Separator/WithAnchor/index.tsx @@ -3,7 +3,7 @@ import './style.css'; type SeparatorProps = { pageName: String, pageLink: string, - secondLink: string + secondLink?: string } function SeparatorWithAnchor(props: SeparatorProps) { @@ -12,7 +12,9 @@ function SeparatorWithAnchor(props: SeparatorProps) {

{props.pageName}

- View all + {props.secondLink && + View all + } ) } diff --git a/src/datas/critics_users_best_pick.json b/src/datas/critics_users_best_pick.json new file mode 100644 index 0000000..9a4a8ff --- /dev/null +++ b/src/datas/critics_users_best_pick.json @@ -0,0 +1,102 @@ +{ + "critics": [ + { + "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 + }, + { + "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 + }, + { + "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 + }, + { + "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 + }, + { + "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 + }, + { + "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 + } + ], + "users": [ + { + "id": 1, + "name": "Warung Sate Kambing", + "thumbnail": "https://fatahilaharis.files.wordpress.com/2017/07/wp-1499292117215.jpeg", + "location": "Bandung", + "user_rating": 78, + "user_voters": 10 + }, + { + "id": 2, + "name": "Pantai Balekambang", + "thumbnail": "https://www.nativeindonesia.com/foto/pantai-balekambang/Lokasi-Pura-Yang-Berada-Di-Atas-Pulau-Karang.jpg", + "location": "Malang", + "user_rating": 82, + "user_voters": 14 + }, + { + "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", + "user_rating": 70, + "user_voters": 8 + }, + { + "id": 4, + "name": "Taman Pelangi", + "thumbnail": "https://tempat.org/wp-content/uploads/2016/11/57488321_255018015317182_1189210435487115990_n.jpg", + "location": "Surabaya", + "user_rating": 75, + "user_voters": 6 + }, + { + "id": 5, + "thumbnail": "https://ak-d.tripcdn.com/images/1i61t22348mz2uz9cB9FF.jpg?proc=source/trip", + "name": "Ragunan Zoo", + "location": "Jakarta", + "user_rating": 88, + "user_voters": 20 + }, + { + "id": 6, + "name": "Sate Lilit Bali", + "thumbnail": "https://lh3.googleusercontent.com/p/AF1QipNX3DCZxF8MOuyptvxPGfTT4-KNw0BTEqYqeled=s680-w680-h510", + "location": "Denpasar", + "user_rating": 83, + "user_voters": 12 + } + ] +} \ No newline at end of file diff --git a/src/datas/popular.json b/src/datas/popular.json new file mode 100644 index 0000000..9fba413 --- /dev/null +++ b/src/datas/popular.json @@ -0,0 +1,70 @@ +{ + "data": [ + { + "id": 1, + "name": "Warung Sate Kambing", + "thumbnail": "https://fatahilaharis.files.wordpress.com/2017/07/wp-1499292117215.jpeg", + "location": "Bandung", + "critic_rating": 78, + "visited": 48, + "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, + "visited": 48, + "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, + "visited": 48, + "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, + "visited": 48, + "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, + "visited": 48, + "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, + "visited": 48, + "critic_voters": 12, + "user_rating": 88, + "user_voters": 210 + } + ] +} \ No newline at end of file diff --git a/src/datas/popular_user_reviews.json b/src/datas/popular_user_reviews.json new file mode 100644 index 0000000..35a73a9 --- /dev/null +++ b/src/datas/popular_user_reviews.json @@ -0,0 +1,43 @@ +{ + "data": [ + { + "id": 1, + "place_name": "Pantai Teluk selubung", + "location": "Malang", + "message": "I recently had the opportunity to visit a breathtaking beach that left me in awe. Nestled between rolling waves and golden sands, this hidden gem is a true paradise for beach lovers and nature enthusiasts alike.\n\nFrom the moment I set foot on the powdery shoreline, I was captivated by the crystal-clear azure waters that stretched as far as the eye could see. The gentle caress of the ocean breeze and the soothing sound of waves crashing created an instant sense of relaxation.\nOne of the most remarkable features of this beach is its untouched beauty. The absence of crowds and commercialization allowed for an authentic and serene experience. I was able to walk along the shoreline, feeling the soft sand beneath my feet, and listen to the symphony of seagulls above. It was a refreshing escape from the hustle and bustle of daily life.", + "user_id": 1, + "username": "halo", + "place_id": 1, + "thumbnail": "https://www.nativeindonesia.com/foto/pantai-balekambang/Lokasi-Pura-Yang-Berada-Di-Atas-Pulau-Karang.jpg", + "rating": 74, + "comment": 24, + "like": 44 + }, + { + "id": 3, + "message": "I recently had the opportunity to visit a breathtaking beach that left me in awe. Nestled between rolling waves and golden sands, this hidden gem is a true paradise for beach lovers and nature enthusiasts alike.\nFrom the moment I set foot on the powdery shoreline, I was captivated by the crystal-clear azure waters that stretched as far as the eye could see. The gentle caress of the ocean breeze and the soothing sound of waves crashing created an instant sense of relaxation.\nOne of the most remarkable features of this beach is its untouched beauty. The absence of crowds and commercialization allowed for an authentic and serene experience. I was able to walk along the shoreline, feeling the soft sand beneath my feet, and listen to the symphony of seagulls above. It was a refreshing escape from the hustle and bustle of daily life.", + "user_id": 1, + "username": "halo", + "place_name": "Pantai Teluk selubung", + "location": "Malang", + "place_id": 1, + "thumbnail": "https://www.nativeindonesia.com/foto/pantai-balekambang/Lokasi-Pura-Yang-Berada-Di-Atas-Pulau-Karang.jpg", + "rating": 74, + "comment": 24, + "like": 44 + }, + { + "id": 2, + "message": "I recently had the opportunity to visit a breathtaking beach that left me in awe. Nestled between rolling waves and golden sands, this hidden gem is a true paradise for beach lovers and nature enthusiasts alike.\nFrom the moment I set foot on the powdery shoreline, I was captivated by the crystal-clear azure waters that stretched as far as the eye could see. The gentle caress of the ocean breeze and the soothing sound of waves crashing created an instant sense of relaxation\nOne of the most remarkable features of this beach is its untouched beauty. The absence of crowds and commercialization allowed for an authentic and serene experience. I was able to walk along the shoreline, feeling the soft sand beneath my feet, and listen to the symphony of seagulls above. It was a refreshing escape from the hustle and bustle of daily life.", + "user_id": 1, + "username": "halo", + "place_name": "Pantai Teluk selubung", + "location": "Malang", + "place_id": 1, + "thumbnail": "https://www.nativeindonesia.com/foto/pantai-balekambang/Lokasi-Pura-Yang-Berada-Di-Atas-Pulau-Karang.jpg", + "rating": 74, + "comment": 24, + "like": 44 + } + ] +} \ No newline at end of file diff --git a/src/datas/recent_news_event.json b/src/datas/recent_news_event.json new file mode 100644 index 0000000..092557f --- /dev/null +++ b/src/datas/recent_news_event.json @@ -0,0 +1,46 @@ +{ + "data": [ + { + "header": "Resor Pantai Baru Terungkap", + "thumbnail": "http://static.demilked.com/wp-content/uploads/2018/03/5aaa1cb841280-funny-weird-wtf-stock-photos-1-5a39121d2fd9b__700.jpg", + "link": "https://qanon.pub/", + "comments_count": 24, + "likes_count": 12 + }, + { + "header": "Tempat Wisata Tersembunyi: Puncak Gunung", + "comments_count": 24, + "thumbnail": "http://static.demilked.com/wp-content/uploads/2018/03/5aaa1cc654a2d-5aa6627814ed8_0wpenz3anzj01__700.jpg", + "link": "https://www.unqualified-reservations.org/2009/01/gentle-introduction-to-unqualified/", + "likes_count": 12 + }, + { + "header": "Penampilan Live Band Terkini", + "thumbnail": "https://milalink.ru/uploads/posts/2019-01/1547408002_kakie-byvajut-mineraly-i-v-chem-ih-polza-dlja-zdorovja-cheloveka.jpg", + "link": "https://slatestarcodex.com/", + "comments_count": 24, + "likes_count": 12 + }, + { + "header": "Konser Pop Spektakuler Datang", + "thumbnail": "https://64.media.tumblr.com/27ec4dfb259ec74e9ae1d8d8c6f935cf/tumblr_pdf4obI7B21uj48r4o1_1280.jpg", + "link":"https://lainchan.org/", + "comments_count": 24, + "likes_count": 12 + }, + { + "header": "Destinasi Eksotis Menanti Petualang", + "thumbnail": "https://www.boredpanda.com/blog/wp-content/uploads/2022/05/120-627a279454c97__700.jpg", + "link": "http://phrack.org/issues/7/3.html", + "comments_count": 24, + "likes_count": 12 + }, + { + "header": "Malam Jazz Intim: Nada Mellow", + "thumbnail": "https://www.boredpanda.com/blog/wp-content/uploads/2022/05/17-627a1abab8a1f__700.jpg", + "link": "https://pagedout.institute/", + "comments_count": 24, + "likes_count": 12 + } + ] +} \ No newline at end of file diff --git a/src/index.css b/src/index.css index ffdec4b..7c931c9 100644 --- a/src/index.css +++ b/src/index.css @@ -9,7 +9,7 @@ /* color-scheme: light dark; */ color: rgba(255, 255, 255, 0.87); - background-color: #3d3d3d; + background-color: #202225; font-synthesis: none; text-rendering: optimizeLegibility; diff --git a/src/layouts/Default/Default.tsx b/src/layouts/Default/Default.tsx index 8245705..60d0a35 100644 --- a/src/layouts/Default/Default.tsx +++ b/src/layouts/Default/Default.tsx @@ -12,6 +12,38 @@ function DefaultLayout({ children }: ChildrenProps) {
{children}
+ ) } diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index 09192f7..adfd34b 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -4,7 +4,10 @@ import { useEffect, useState } from "preact/hooks"; import { DefaultLayout } from '../../layouts/'; import { SeparatorWithAnchor } from '../../components'; import data from '../../datas/home.json'; -import axios from 'axios'; +import news from '../../datas/recent_news_event.json'; +import popular from '../../datas/popular.json'; +import critics_users_pick from '../../datas/critics_users_best_pick.json'; +import popular_user_review from '../../datas/popular_user_reviews.json'; import './style.css'; type NewPlaces = { @@ -18,12 +21,19 @@ type NewPlaces = { user_voters: Number } +type News = { + header: string, + thumbnail: string, + link: string, + comments_count: Number + likes_count: Number +} + function Home() { const [count, setCount] = useState(0) const getUrl = async () => { - const {data} = await axios("https://www.detik.com/sumut/wisata/d-6902796/melihat-koleksi-museum-juang-45-medan-yang-baru-diresmikan-gubsu"); - console.log(data); + } useEffect(() => { @@ -33,14 +43,14 @@ function Home() { return (
- + {/* RECENTLY ADDED SECTION */}
{data.new_places.map((x: NewPlaces) => ( -
+
{/*

{x.id}

*/} -
+
{x.name}
@@ -71,12 +81,119 @@ function Home() { {/* END RECENTLY ADDED SECTION */} {/* START RECENT NEWS / EVENT SECTION */} -
+ {/* USE OPEN GRAPH PARSER TO READ OG DATA FROM HTML */} + {/* https://github.com/dyatlov/go-opengraph */} +
- +
+ {news.data.map((x: News) => ( +
+
+ +
+ {x.link.split("/")[2].replace(/www\./, '')} +

{x.header}

+
+ +

{x.likes_count}

+ +

{x.comments_count}

+
+
+ )) + } +
{/* END RECENT NEWS / EVENT SECTION */} + + {/* START LOCATION CRITICS BEST AND USERS BEST SECTION */} +
+
+
+ +
+ {popular.data.map((x) => ( +
+
+ +
+

{x.name}

+

{x.location}

+
+ ))} +
+
+
+ + {critics_users_pick.critics.map((x) => ( +
+
+ +
+

{x.name}

+

{x.location}

+
+

{x.critic_rating} ({x.critic_voters})

+
+
+
+
+
+ )) + } +
+
+ + {critics_users_pick.users.map((x) => ( +
+
+ +
+

{x.name}

+

{x.location}

+
+

{x.user_rating} ({x.user_rating})

+
+
+
+
+
+ )) + } +
+
+
+ {/* LOCATION CRITICS BEST AND USERS BEST SECTION */} + +
+ +
+ {popular_user_review.data.map((x) => ( +
+
+ +
+

{x.place_name}

+

{x.location}

+

{x.username}

+
+

{x.rating}

+
+
+
+
+
+
+

{x.message}

+
+
+ )) + + } +
+
+