add Recent places
This commit is contained in:
parent
7bb75029d7
commit
aac2b0d41b
133
src/app.css
133
src/app.css
@ -1,137 +1,16 @@
|
|||||||
|
@tailwind components;
|
||||||
|
|
||||||
/* #app {
|
/* #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 {
|
.content {
|
||||||
max-width: 1280px;
|
max-width: 1440px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
text-align: center;
|
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 {
|
.logo {
|
||||||
height: 6em;
|
height: 6em;
|
||||||
padding: 1.5em;
|
padding: 1.5em;
|
||||||
@ -150,3 +29,9 @@ label:before {
|
|||||||
.read-the-docs {
|
.read-the-docs {
|
||||||
color: #888;
|
color: #888;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@layer components {
|
||||||
|
.text-prime {
|
||||||
|
@apply text-secondary
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
import React from "preact/compat";
|
import React from "preact/compat";
|
||||||
import { useState } from "preact/hooks";
|
import { useState } from "preact/hooks";
|
||||||
|
import './style.css';
|
||||||
|
|
||||||
|
|
||||||
function Header() {
|
function Header() {
|
||||||
@ -20,7 +21,8 @@ function Header() {
|
|||||||
document.body.style.overflow = "hidden"
|
document.body.style.overflow = "hidden"
|
||||||
|
|
||||||
if(dropdown) {
|
if(dropdown) {
|
||||||
document.body.style.overflow = "scroll";
|
document.body.style.overflowX = "hidden";
|
||||||
|
document.body.style.overflowY = "scroll";
|
||||||
}
|
}
|
||||||
setDropdown(!dropdown)
|
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" : ""}`}>Best places</a>
|
||||||
<a href="#" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Discover</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" : ""}`}>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" : ""}`}>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" : ""}`}>Forum</a>
|
||||||
|
<a href="#" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Sign in</a>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
)
|
)
|
||||||
|
|||||||
122
src/components/Header/style.css
Normal file
122
src/components/Header/style.css
Normal 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;
|
||||||
|
}
|
||||||
20
src/components/Separator/WithAnchor/index.tsx
Normal file
20
src/components/Separator/WithAnchor/index.tsx
Normal 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;
|
||||||
4
src/components/Separator/WithAnchor/style.css
Normal file
4
src/components/Separator/WithAnchor/style.css
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
.divider {
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
padding-bottom: 3px;
|
||||||
|
}
|
||||||
@ -1,5 +1,7 @@
|
|||||||
import Header from "./Header";
|
import Header from "./Header";
|
||||||
|
import SeparatorWithAnchor from "./Separator/WithAnchor";
|
||||||
|
|
||||||
export {
|
export {
|
||||||
Header
|
Header,
|
||||||
|
SeparatorWithAnchor
|
||||||
}
|
}
|
||||||
124
src/datas/home.json
Normal file
124
src/datas/home.json
Normal 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
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -1,6 +1,6 @@
|
|||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
/* @tailwind component; */
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
|||||||
@ -9,7 +9,9 @@ function DefaultLayout({ children }: ChildrenProps) {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Header />
|
<Header />
|
||||||
{children}
|
<main>
|
||||||
|
{children}
|
||||||
|
</main>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,6 +2,20 @@ import preactLogo from '../../assets/preact.svg';
|
|||||||
import viteLogo from '/vite.svg'
|
import viteLogo from '/vite.svg'
|
||||||
import { useState } from "preact/hooks";
|
import { useState } from "preact/hooks";
|
||||||
import { DefaultLayout } from '../../layouts/';
|
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() {
|
function Home() {
|
||||||
const [count, setCount] = useState(0)
|
const [count, setCount] = useState(0)
|
||||||
@ -9,7 +23,51 @@ function Home() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<DefaultLayout>
|
<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">
|
<div className="flex flex-row">
|
||||||
<a href="https://vitejs.dev" target="_blank">
|
<a href="https://vitejs.dev" target="_blank">
|
||||||
<img src={viteLogo} class="logo" alt="Vite logo" />
|
<img src={viteLogo} class="logo" alt="Vite logo" />
|
||||||
@ -30,8 +88,7 @@ function Home() {
|
|||||||
<p class="read-the-docs">
|
<p class="read-the-docs">
|
||||||
Click on the Vite and Preact logos to learn more
|
Click on the Vite and Preact logos to learn more
|
||||||
</p>
|
</p>
|
||||||
|
<h1 className="text-3xl font-bold underline text-prime" >
|
||||||
<h1 className="text-3xl font-bold underline">
|
|
||||||
Hello world!
|
Hello world!
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
4
src/pages/Home/style.css
Normal file
4
src/pages/Home/style.css
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
.main-content {
|
||||||
|
padding: 20px 30px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
@ -2,6 +2,38 @@
|
|||||||
export default {
|
export default {
|
||||||
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
||||||
theme: {
|
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: {},
|
extend: {},
|
||||||
},
|
},
|
||||||
plugins: [],
|
plugins: [],
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user