add Recent places

This commit is contained in:
NCanggoro 2023-08-30 16:46:33 +07:00
parent 7bb75029d7
commit aac2b0d41b
12 changed files with 387 additions and 133 deletions

View File

@ -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
}
}

View File

@ -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>
)

View File

@ -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;
}

View File

@ -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;

View File

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

View File

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

124
src/datas/home.json Normal file
View File

@ -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
}
]
}

View File

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

View File

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

View File

@ -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">
<h1 className="text-3xl font-bold underline text-prime" >
Hello world!
</h1>
</div>

4
src/pages/Home/style.css Normal file
View File

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

View File

@ -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: [],