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

add lato font

Browse Source
This commit is contained in:
NCanggoro 2023-09-03 17:12:06 +07:00
parent fd0a173e9c
commit 2fc3bdf2b1
23 changed files with 236 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1,40 @@
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 Normal file
View File

@ -0,0 +1,10 @@
.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' : ""}`}>HilingRiviw</h1>
<h1 className={`title ${dropdown ? 'title-dropdown' : ""}`}>Hilingin</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-sm"}>View all</a>
<a href={props.secondLink} className={"text-xs"}>View all</a>
}
</div>
)

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

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

4
src/components/index.ts
View File

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

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

Binary file not shown.

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

Binary file not shown.

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

Binary file not shown.

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

Binary file not shown.

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

Binary file not shown.

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

Binary file not shown.

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

Binary file not shown.

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

Binary file not shown.

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

Binary file not shown.

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

Binary file not shown.

2
src/index.css
View File

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

88
src/lato.css Normal file
View File

@ -0,0 +1,88 @@
@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 { Header } from "../../components";
import { Footer, Header } from "../../components";
type ChildrenProps = {
children: ComponentChildren
@ -12,38 +12,7 @@ function DefaultLayout({ children }: ChildrenProps) {
<main style={{ overflow: 'hidden' }}>
{children}
</main>
<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>
<Footer />
</>
)
}

1
src/main.tsx
View File

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

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

@ -30,16 +30,6 @@ type News = {
}
function Home() {
const [count, setCount] = useState(0)
const getUrl = async () => {
}
useEffect(() => {
getUrl();
}, [])
return (
<DefaultLayout>
<div className="content main-content mt-3">
@ -49,31 +39,30 @@ function Home() {
<SeparatorWithAnchor pageLink='#' pageName='recently added' secondLink='#' />
{data.new_places.map((x: NewPlaces) => (
<div className={"recently-added-section-card"}>
{/* <p>{x.id}</p> */}
<div style={{ width: 200, height: 200, overflow: 'hidden', borderRadius: 7 }}>
<div className={'border-secondary'} style={{ width: 200, height: 200, overflow: 'hidden', borderRadius: 7, borderWidth: 1 }}>
<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 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>
<div className={"flex flex-row"}>
<div>
<p>{x.critic_rating}</p>
<div style={{ height: 4, width: 40, backgroundColor: "#72767d" }}>
<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 style={{ height: 4, width: `${x.critic_rating}%`, backgroundColor: 'green' }} />
</div>
</div>
<p>Critic Score ({x.critic_voters})</p>
<p className={"text-sm text-tertiary"}>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 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>
</div>
<p>User score ({x.user_voters})</p>
<p className={'text-sm text-tertiary'}>user score ({x.user_voters})</p>
</div>
</div>
))}
@ -87,17 +76,17 @@ function Home() {
<SeparatorWithAnchor pageLink='#' pageName='Recent News / Event' secondLink='#' />
<div className={"mt-5"}>
{news.data.map((x: News) => (
<div style={{ display: 'inline-block', width: '33.3%', padding: '0 1% 15px', verticalAlign: 'top' }}>
<div class={"text-sm"}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 target="_blank" href={x.link}>{x.link.split("/")[2].replace(/www\./, '')}</a>
<p>{x.header}</p>
<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>
<div className={"flex flex-row"}>
<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>
<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>
</div>
</div>
))
@ -114,12 +103,15 @@ function Home() {
<SeparatorWithAnchor pageLink='#' pageName={"Trending Now"} secondLink='#' />
<div className={'grid grid-cols-3'}>
{popular.data.map((x) => (
<div className={"m-2"}>
<div style={{ overflow: 'hidden', borderRadius: 7 }}>
<div className={"m-2 text-sm"}>
<div className={"mb-2"} style={{ overflow: 'hidden', borderRadius: 7 }}>
<img src={x.thumbnail} style={{ height: 200, width: '100%' }} />
</div>
</div >
<p>{x.name}</p>
<p>{x.location}</p>
<p className={"text-xs"}>{x.location}</p>
<div>
</div>
</div>
))}
</div>
@ -127,18 +119,19 @@ function Home() {
<div>
<SeparatorWithAnchor pageLink='#' pageName={"Critic's Best"} />
{critics_users_pick.critics.map((x) => (
<div className={"mt-1"}>
<div style={{ width: 72, height: 72, float: 'left' }}>
<img src={x.thumbnail} style={{ height: '100%', width: '100%', }} />
<div className={"pt-2 text-sm"}>
<div className={'mr-2'} style={{ width: 72, height: 72, float: 'left' }}>
<img src={x.thumbnail} style={{ height: '100%', width: '100%', borderRadius: 3}} />
</div>
<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" }}>
<p className={'location-title'}>{x.name}</p>
<p className={'text-xs'}>{x.location}</p>
<div className={'mt-3'} style={{ display: 'inline-block' }}>
<p className={'text-xs ml-2'}>{x.critic_rating}</p>
<div style={{ height: 4, width: 30, backgroundColor: "#72767d" }}>
<div style={{ height: 4, width: `${x.critic_rating}%`, backgroundColor: 'green' }} />
</div>
</div>
<div style={{ clear: 'both'}} />
</div>
))
}
@ -146,18 +139,19 @@ function Home() {
<div>
<SeparatorWithAnchor pageLink='#' pageName={"User's Best"} />
{critics_users_pick.users.map((x) => (
<div className={"mt-1"}>
<div style={{ width: 72, height: 72, float: 'left' }}>
<img src={x.thumbnail} style={{ height: '100%', width: '100%', }} />
<div className={"pt-2 text-sm"}>
<div className={'mr-2'} style={{ width: 72, height: 72, float: 'left' }}>
<img src={x.thumbnail} style={{ height: '100%', width: '100%', borderRadius: 3}} />
</div>
<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" }}>
<p className={'location-title'}>{x.name}</p>
<p className={'text-xs'}>{x.location}</p>
<div className={'mt-3'} style={{ display: 'inline-block' }}>
<p className={'text-xs ml-2'}>{x.user_rating}</p>
<div style={{ height: 4, width: 30, backgroundColor: "#72767d"}}>
<div style={{ height: 4, width: `${x.user_rating}%`, backgroundColor: 'green' }} />
</div>
</div>
<div style={{ clear: 'both'}} />
</div>
))
}
@ -170,22 +164,23 @@ function Home() {
<SeparatorWithAnchor pageLink='#' pageName={"Popular user reviews"} secondLink='#' />
<div>
{popular_user_review.data.map((x) => (
<div style={{ display: 'inline-block', width: '33.3%', padding: '10px 2% 20px', verticalAlign: 'top', boxSizing: 'border-box' }}>
<div className={'text-sm'} 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 style={{ whiteSpace: 'nowrap' }} className={"text-sm"}>{x.place_name}</p>
<p className={'text-sm'}>{x.location}</p>
<p className={"text-sm location-titles"}>{x.place_name}</p>
<p className={'text-xs mb-2'}>{x.location}</p>
<p className={'text-sm'}>{x.username}</p>
<div style={{ display: 'inline-block', overflow: 'hidden', verticalAlign: 'middle' }}>
<p>{x.rating}</p>
<div style={{ height: 4, width: 40, backgroundColor: "#72767d" }}>
<p className={'text-xs ml-2 mt-1'}>{x.rating}</p>
<div style={{ height: 4, width: 30, backgroundColor: "#72767d" }}>
<div style={{ height: 4, width: `${x.rating}%`, backgroundColor: 'green' }} />
</div>
</div>
<div style={{ clear: 'both'}} className={'mb-3'}/>
<div>
<p>{x.message}</p>
{x.message}
<a className={'text-tertiary ml-2'} style={{ cursor: 'pointer'}}>read more</a>
</div>
</div>
))
@ -193,30 +188,6 @@ 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>

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

@ -11,6 +11,26 @@
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;
}
@media screen and (max-width: 1300px) {
.recently-added-section-card {

10
tailwind.config.js
View File

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