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 {
|
||||
|
||||
} */
|
||||
|
||||
@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
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
)
|
||||
|
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 SeparatorWithAnchor from "./Separator/WithAnchor";
|
||||
|
||||
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 components;
|
||||
@tailwind utilities;
|
||||
/* @tailwind component; */
|
||||
|
||||
:root {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
|
@ -9,7 +9,9 @@ function DefaultLayout({ children }: ChildrenProps) {
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<main>
|
||||
{children}
|
||||
</main>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
@ -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
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 {
|
||||
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: [],
|
||||
|
Loading…
Reference in New Issue
Block a user