nochill/hilingriviw
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: nochill:84f591833df829458cc9eea754fc751027a80060
Branches Tags
nochill:master
nochill:dev
..
compare: nochill:fd0a173e9c31c9f48381d3b0d432bf0f5dc37439
Branches Tags
nochill:dev
nochill:master

No commits in common. "84f591833df829458cc9eea754fc751027a80060" and "fd0a173e9c31c9f48381d3b0d432bf0f5dc37439" have entirely different histories.
84f591833d ... fd0a173e9c

23 changed files with 131 additions and 298 deletions
Show Stats Expand all files Collapse all files

40
src/components/Footer/index.tsx
View File

@ -1,40 +0,0 @@
import './style.css';
function Footer() {
return (
<footer className={"bg-secondary footer-container"}>
<div className={"content text-left footer-section"}>
<div style={{ float: 'left', paddingRight: 30, margin: '0 30px 20px 0' }}>
<h2 className={'font-bold text-md'}>LOCATION</h2>
<a href={'#'} className={'text-sm block'}>Highest Rated</a>
<a href={'#'} className={'text-sm block'}>Lowest Rated</a>
<a href={'#'} className={'text-sm block'}>Recently Added</a>
<a href={'#'} className={'text-sm block'}>Random</a>
</div>
<div style={{ float: 'left', paddingRight: 30, margin: '0 30px 20px 0' }}>
<h2 className={'font-bold text-md'}>REGION</h2>
<a href={'#'} className={'text-sm block'}>Jawa</a>
<a href={'#'} className={'text-sm block'}>Kalimantan</a>
<a href={'#'} className={'text-sm block'}>Nusa Tenggara</a>
<a href={'#'} className={'text-sm block'}>Papua</a>
<a href={'#'} className={'text-sm block'}>Sulawesi</a>
<a href={'#'} className={'text-sm block'}>Sumatra</a>
</div>
<div style={{ float: 'left', paddingRight: 30, margin: '0 30px 20px 0' }}>
<h2 className={'font-bold text-md'}>MORE</h2>
<a href={"#"} className={'text-sm block'}>On this day</a>
<a href={"#"} className={'text-sm block'}>Site updates</a>
</div>
<div style={{ float: 'left', paddingRight: 30, margin: '0 30px 20px 0' }}>
<h2 className={'font-bold text-md'}>SITE DETAILS</h2>
<a href={'#'} className={'text-sm block'}>Faq</a>
<a href={'#'} className={'text-sm block'}>Privacy policy</a>
<a href={'#'} className={'text-sm block'}>Feedback</a>
<a href={'#'} className={'text-sm block'}>Contact Us</a>
</div>
</div>
</footer>
)
}
export default Footer;

10
src/components/Footer/style.css
View File

@ -1,10 +0,0 @@
.footer-container {
width: 100%;
clear: both;
overflow: hidden;
padding-bottom: 4vh;
}
.footer-section a {
line-height: 1.75;
}

2
src/components/Header/index.tsx
View File

@ -30,7 +30,7 @@ function Header() {
return (
<header>
<div className="flex flex-row content">
<h1 className={`title ${dropdown ? 'title-dropdown' : ""}`}>Hilingin</h1>
<h1 className={`title ${dropdown ? 'title-dropdown' : ""}`}>HilingRiviw</h1>
<form onSubmit={onSearchSubmit} className={`search-input ${dropdown ? "search-input-dropdown" : ""}`}>
<label>
<input

2
src/components/Separator/WithAnchor/index.tsx
View File

@ -13,7 +13,7 @@ function SeparatorWithAnchor(props: SeparatorProps) {
<a href={props.pageLink}>{props.pageName}</a>
</h1>
{props.secondLink &&
<a href={props.secondLink} className={"text-xs"}>View all</a>
<a href={props.secondLink} className={"text-sm"}>View all</a>
}
</div>
)

7
src/components/Separator/WithAnchor/style.css
View File

@ -1,9 +1,4 @@
.divider {
border-bottom-width: 1px;
padding-bottom: 3px;
border-color: #38444d;
}
a:hover {
color: #92a8b7;
}
}

4
src/components/index.ts
View File

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

BIN
src/fonts/Lato-Black.ttf
View File

Binary file not shown.

BIN
src/fonts/Lato-BlackItalic.ttf
View File

Binary file not shown.

BIN
src/fonts/Lato-Bold.ttf
View File

Binary file not shown.

BIN
src/fonts/Lato-BoldItalic.ttf
View File

Binary file not shown.

BIN
src/fonts/Lato-Italic.ttf
View File

Binary file not shown.

BIN
src/fonts/Lato-Light.ttf
View File

Binary file not shown.

BIN
src/fonts/Lato-LightItalic.ttf
View File

Binary file not shown.

BIN
src/fonts/Lato-Regular.ttf
View File

Binary file not shown.

BIN
src/fonts/Lato-Thin.ttf
View File

Binary file not shown.

BIN
src/fonts/Lato-ThinItalic.ttf
View File

Binary file not shown.

2
src/index.css
View File

@ -3,7 +3,7 @@
/* @tailwind component; */
:root {
font-family: 'Lato', sans-serif;
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;

88
src/lato.css
View File

@ -1,88 +0,0 @@
@font-face {
font-family: 'Lato';
src: url('./fonts/Lato-Light.ttf') format('truetype');
font-weight: 300;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: 'Lato';
src: url('./fonts/Lato-LightItalic.ttf') format('truetype');
font-weight: 300;
font-display: swap;
font-style: italic;
}
@font-face {
font-family: 'Lato';
src: url('./fonts/Lato-Regular.ttf') format('truetype');
font-weight: 400;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: 'Lato';
src: url('./fonts/Lato-Italic.ttf') format('truetype');
font-weight: 400;
font-display: swap;
font-style: italic;
}
@font-face {
font-family: 'Lato';
src: url('./fonts/Lato-Medium.ttf') format('truetype');
font-weight: 500;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: 'Lato';
src: url('./fonts/Lato-MediumItalic.ttf') format('truetype');
font-weight: 500;
font-display: swap;
font-style: italic;
}
@font-face {
font-family: 'Lato';
src: url('./fonts/Lato-Bold.ttf') format('truetype');
font-weight: 700;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: 'Lato';
src: url('./fonts/Lato-BoldItalic.ttf') format('truetype');
font-weight: 700;
font-display: swap;
font-style: italic;
}
@font-face {
font-family: 'Lato';
src: url('./fonts/Lato-Black.ttf') format('truetype');
font-weight: 900;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: 'Lato';
src: url('./fonts/Lato-BlackItalic.ttf') format('truetype');
font-weight: 900;
font-display: swap;
font-style: italic;
}

35
src/layouts/Default/Default.tsx
View File

@ -1,5 +1,5 @@
import { ComponentChildren } from "preact";
import { Footer, Header } from "../../components";
import { Header } from "../../components";
type ChildrenProps = {
children: ComponentChildren
@ -12,7 +12,38 @@ function DefaultLayout({ children }: ChildrenProps) {
<main style={{ overflow: 'hidden' }}>
{children}
</main>
<Footer />
<footer className={"bg-secondary"} style={{ width: "100%", clear: 'both', overflow: 'hidden', paddingBottom: 50}}>
<div className={"content text-left"}>
<div style={{ float: 'left', paddingRight: 30, margin: '0 30px 20px 0'}}>
<h2>Location</h2>
<p>Highest Rated</p>
<p>Lowest Rated</p>
<p>Recently Added</p>
<p>Random</p>
</div>
<div style={{ float: 'left', paddingRight: 30, margin: '0 30px 20px 0'}}>
<h2>IDK</h2>
<p>Jawa</p>
<p>Kalimantan</p>
<p>Nusa Tenggara</p>
<p>Papua</p>
<p>Sulawesi</p>
<p>Sumatra</p>
</div>
<div style={{ float: 'left', paddingRight: 30, margin: '0 30px 20px 0'}}>
<h2>MORE</h2>
<p>On this day</p>
<p>Site updates</p>
</div>
<div style={{ float: 'left', paddingRight: 30, margin: '0 30px 20px 0'}}>
<h2>SITE DETAILS</h2>
<p>FAQ</p>
<p>PRIVACY Policy</p>
<p>Feedback</p>
<p>Contact Us</p>
</div>
</div>
</footer>
</>
)
}

1
src/main.tsx
View File

@ -1,6 +1,5 @@
import { render } from 'preact'
import { App } from './app.tsx'
import './index.css'
import './lato.css';
render(<App />, document.getElementById('app')!)

149
src/pages/Home/index.tsx
View File

@ -30,6 +30,16 @@ type News = {
}
function Home() {
const [count, setCount] = useState(0)
const getUrl = async () => {
}
useEffect(() => {
getUrl();
}, [])
return (
<DefaultLayout>
<div className="content main-content mt-3">
@ -39,30 +49,31 @@ function Home() {
<SeparatorWithAnchor pageLink='#' pageName='recently added' secondLink='#' />
{data.new_places.map((x: NewPlaces) => (
<div className={"recently-added-section-card"}>
<div className={'border-secondary'} style={{ width: 200, height: 200, overflow: 'hidden', borderRadius: 7, borderWidth: 1 }}>
{/* <p>{x.id}</p> */}
<div style={{ width: 200, height: 200, overflow: 'hidden', borderRadius: 7 }}>
<img alt={x.name} src={x.thumbnail} style={{ width: '100%', height: '100%' }} />
</div>
<div className={"border-primary pb-2 location-container text-sm mb-2 mt-2"}>
<p className={'location-title'}>{x.name}</p>
<p className={'text-xs mt-1'}>{x.location}</p>
<div style={{ textAlign: 'left', borderBottomWidth: 1 }}>
<p>{x.name}</p>
<p>{x.location}</p>
</div>
<div className={"flex flex-row items-center mb-3"}>
<div className={'mr-3'}>
<p className={'text-sm text-center'}>{x.critic_rating}</p>
<div style={{ height: 4, width: 30, backgroundColor: "#72767d" }}>
<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 className={"text-sm text-tertiary"}>critic score ({x.critic_voters})</p>
<p>Critic Score ({x.critic_voters})</p>
</div>
<div className={"flex flex-row items-center"}>
<div className={'mr-3'}>
<p className={'text-sm text-center'}>{x.user_rating}</p>
<div style={{ height: 4, width: 30, backgroundColor: "#72767d" }}>
<div style={{ height: 4, width: ` ${x.user_rating}%`, backgroundColor: 'green' }} />
<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 className={'text-sm text-tertiary'}>user score ({x.user_voters})</p>
<p>User score ({x.user_voters})</p>
</div>
</div>
))}
@ -76,17 +87,17 @@ function Home() {
<SeparatorWithAnchor pageLink='#' pageName='Recent News / Event' secondLink='#' />
<div className={"mt-5"}>
{news.data.map((x: News) => (
<div class={"text-sm news-card"}>
<div style={{ display: 'inline-block', width: '33.3%', padding: '0 1% 15px', verticalAlign: 'top' }}>
<div style={{ height: 250, overflow: 'hidden', borderRadius: 7 }}>
<img src={x.thumbnail} style={{ width: "100%", height: '100%', objectFit: 'cover', objectPosition: 'top' }} />
</div>
<a className={'news-link'} target="_blank" href={x.link}>{x.link.split("/")[2].replace(/www\./, '')}</a>
<p className={'mt-2 mb-2'}>{x.header}</p>
<a target="_blank" href={x.link}>{x.link.split("/")[2].replace(/www\./, '')}</a>
<p>{x.header}</p>
<div className={"flex flex-row"}>
<svg xmlns="http://www.w3.org/2000/svg" fill={"gray"} height="18" viewBox="0 -960 960 960" width="18"><path d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z" /></svg>
<p className={"mr-3 ml-1"}>{x.likes_count}</p>
<svg xmlns="http://www.w3.org/2000/svg" fill={"gray"} height="16" viewBox="0 -960 960 960" width="18"><path d="M880-80 720-240H160q-33 0-56.5-23.5T80-320v-480q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v720ZM160-320v-480 480Zm594 0 46 45v-525H160v480h594Z" /></svg>
<p className={"ml-1"}>{x.comments_count}</p>
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z" /></svg>
<p>{x.likes_count}</p>
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M880-80 720-240H160q-33 0-56.5-23.5T80-320v-480q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v720ZM160-320v-480 480Zm594 0 46 45v-525H160v480h594Z" /></svg>
<p>{x.comments_count}</p>
</div>
</div>
))
@ -98,60 +109,55 @@ function Home() {
{/* START LOCATION CRITICS BEST AND USERS BEST SECTION */}
<section className={"mt-10"}>
<div class={"grid grid-cols-4 lg:gap-12"}>
<div className={'col-span-4 lg:col-span-2 trending-section'}>
<div class={"grid grid-cols-4 gap-12"}>
<div className={'col-span-2 mr-5'}>
<SeparatorWithAnchor pageLink='#' pageName={"Trending Now"} secondLink='#' />
<div className={'grid grid-cols-4 md:grid-cols-3'}>
<div className={'grid grid-cols-3'}>
{popular.data.map((x) => (
<div className={"m-2 text-sm col-span-2 md:col-span-1"}>
<div className={"mb-2 trending-image-container"}>
<img src={x.thumbnail} style={{ width: '100%', height: '100%' }} />
</div >
<p>{x.name}</p>
<p className={"text-xs"}>{x.location}</p>
<div>
<div className={"m-2"}>
<div style={{ overflow: 'hidden', borderRadius: 7 }}>
<img src={x.thumbnail} style={{ height: 200, width: '100%' }} />
</div>
<p>{x.name}</p>
<p>{x.location}</p>
</div>
))}
</div>
</div>
<div className={'col-span-2 lg:col-span-1'}>
<div>
<SeparatorWithAnchor pageLink='#' pageName={"Critic's Best"} />
{critics_users_pick.critics.map((x) => (
<div className={"pt-2 text-sm"}>
<div className={'mr-2 critics-users-image'}>
<img src={x.thumbnail} style={{ height: '100%', width: '100%', borderRadius: 3}} />
<div className={"mt-1"}>
<div style={{ width: 72, height: 72, float: 'left' }}>
<img src={x.thumbnail} style={{ height: '100%', width: '100%', }} />
</div>
<p className={'location-title'}>{x.name}</p>
<p className={'text-xs location-province location-title'}>{x.location}</p>
<div className={'critics-users-rating-container'} style={{ display: 'inline-block' }}>
<p className={'text-xs ml-2'}>{x.critic_rating}</p>
<div style={{ height: 4, width: 30, backgroundColor: "#72767d" }}>
<p>{x.name}</p>
<p>{x.location}</p>
<div style={{ display: 'inline-block' }}>
<p>{x.critic_rating} ({x.critic_voters})</p>
<div style={{ height: 4, width: 40, backgroundColor: "#72767d" }}>
<div style={{ height: 4, width: `${x.critic_rating}%`, backgroundColor: 'green' }} />
</div>
</div>
<div style={{ clear: 'both'}} />
</div>
))
}
</div>
<div className={'col-span-2 lg:col-span-1'}>
<div>
<SeparatorWithAnchor pageLink='#' pageName={"User's Best"} />
{critics_users_pick.users.map((x) => (
<div className={"pt-2 text-sm"}>
<div className={'mr-2 critics-users-image'}>
<img src={x.thumbnail} style={{ height: '100%', width: '100%', borderRadius: 3}} />
<div className={"mt-1"}>
<div style={{ width: 72, height: 72, float: 'left' }}>
<img src={x.thumbnail} style={{ height: '100%', width: '100%', }} />
</div>
<p className={'location-title'}>{x.name}</p>
<p className={'text-xs location-province location-title'}>{x.location}</p>
<div className={'critics-users-rating-container'} style={{ display: 'inline-block' }}>
<p className={'text-xs ml-2'}>{x.user_rating}</p>
<div style={{ height: 4, width: 30, backgroundColor: "#72767d"}}>
<p>{x.name}</p>
<p>{x.location}</p>
<div style={{ display: 'inline-block' }}>
<p>{x.user_rating} ({x.user_rating})</p>
<div style={{ height: 4, width: 40, backgroundColor: "#72767d" }}>
<div style={{ height: 4, width: `${x.user_rating}%`, backgroundColor: 'green' }} />
</div>
</div>
<div style={{ clear: 'both'}} />
</div>
))
}
@ -164,23 +170,22 @@ function Home() {
<SeparatorWithAnchor pageLink='#' pageName={"Popular user reviews"} secondLink='#' />
<div>
{popular_user_review.data.map((x) => (
<div className={'text-sm'} style={{ display: 'inline-block', width: '33.3%', padding: '10px 2% 20px', verticalAlign: 'top', boxSizing: 'border-box' }}>
<div style={{ display: 'inline-block', width: '33.3%', padding: '10px 2% 20px', verticalAlign: 'top', boxSizing: 'border-box' }}>
<div style={{ float: 'left', width: 120, margin: '0 12px 10px 0' }}>
<img src={x.thumbnail} style={{ width: '100%' }} />
</div>
<p className={"text-sm location-titles"}>{x.place_name}</p>
<p className={'text-xs mb-2'}>{x.location}</p>
<p style={{ whiteSpace: 'nowrap' }} className={"text-sm"}>{x.place_name}</p>
<p className={'text-sm'}>{x.location}</p>
<p className={'text-sm'}>{x.username}</p>
<div style={{ display: 'inline-block', overflow: 'hidden', verticalAlign: 'middle' }}>
<p className={'text-xs ml-2 mt-1'}>{x.rating}</p>
<div style={{ height: 4, width: 30, backgroundColor: "#72767d" }}>
<p>{x.rating}</p>
<div style={{ height: 4, width: 40, backgroundColor: "#72767d" }}>
<div style={{ height: 4, width: `${x.rating}%`, backgroundColor: 'green' }} />
</div>
</div>
<div style={{ clear: 'both'}} className={'mb-3'}/>
<div>
{x.message}
<a className={'text-tertiary ml-2'} style={{ cursor: 'pointer'}}>read more</a>
<p>{x.message}</p>
</div>
</div>
))
@ -188,6 +193,30 @@ function Home() {
}
</div>
</section>
<div className="flex flex-row">
<a href="https://vitejs.dev" target="_blank">
<img src={viteLogo} class="logo" alt="Vite logo" />
</a>
<a href="https://preactjs.com" target="_blank">
<img src={preactLogo} class="logo preact" alt="Preact logo" />
</a>
</div>
<h1>Vite + Preact</h1>
<div class="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
<p>
Edit <code>src/app.tsx</code> and save to test HMR
</p>
</div>
<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" >
Hello world!
</h1>
</div>
</DefaultLayout>

79
src/pages/Home/style.css
View File

@ -11,50 +11,6 @@
width: 16.6%;
}
.location-container {
text-align: left;
border-bottom-width: 1px;
margin-top: 5px;
}
.location-title {
white-space: nowrap;
text-overflow: ellipsis;
display: block;
overflow: hidden;
}
.news-link {
color: #fbc531;
}
.news-link:hover{
color: #b99229;
}
.news-card {
display: inline-block;
width: 33.3%;
padding: 0 1% 15px;
vertical-align: top;
}
.trending-image-container {
overflow: hidden;
border-radius: 7px;
height: 200px;
}
.critics-users-image {
width: 72px;
height: 72px;
float: left;
}
.critics-users-rating-container {
margin-top: 0.75rem;
}
@media screen and (max-width: 1300px) {
.recently-added-section-card {
@ -66,13 +22,6 @@
.recently-added-section-card {
width: 33.3%;
}
.news-card {
width: 50%;
}
.trending-section {
margin-bottom: 1.75rem;
}
}
@media screen and (max-width: 625px) {
@ -81,28 +30,6 @@
}
}
@media screen and (max-width: 425px) {
.news-card {
width: 100%;
}
.location-title {
font-size: 10px;
}
.critics-users-image {
height: 60px;
width: 60px;
}
.location-province {
font-size: 10px !important;
}
.trending-image-container {
overflow: hidden;
border-radius: 7px;
height: 100px;
}
}
/* @media screen and (max-width: 425px) {
} */

10
tailwind.config.js
View File

@ -6,15 +6,7 @@ export default {
transparent: 'transparent',
current: 'currentColor',
primary: '#202225',
secondary: '#2f3136',
tertiary: '#a8adb3'
},
borderColor: {
primary: '#38444d',
secondary: '#202225'
},
fontFamily: {
lato: ['Lato', 'sans-serif']
secondary: '#2f3136'
},
fontSize: {
xs: ['0.75rem', { lineHeight: '1rem' }],