Created
September 25, 2021 19:16
-
-
Save DavidAmunga/34f8f63729546bf48130c2509d529868 to your computer and use it in GitHub Desktop.
SitePreview Tutorial - Home JS Setup
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useAuth0 } from '@auth0/auth0-react'; | |
import React from 'react'; | |
const Home = () => { | |
const { logout, user } = useAuth0(); | |
const [form, setForm] = React.useState({ | |
title: 'Site Name', | |
description: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, doloribus dolorem nisi accu`, | |
image: 'https://via.placeholder.com/1200x630?text=Your+Image+Here', | |
}); | |
const onChange = (e) => { | |
// Stop if Title is More than 160 Characters | |
if (e.target.name === 'title' && e.target.value.length > 60) { | |
return; | |
} | |
// Stop if Description is More than 160 Characters | |
if (e.target.name === 'description' && e.target.value.length > 160) { | |
return; | |
} | |
setForm({ ...form, [e.target.name]: e.target.value }); | |
}; | |
return ( | |
<div className="mx-auto max-w-5-xl px-4 mt-12"> | |
<div className="flex justify-between"> | |
<div className="bg-yellow-100 text-yellow-800 flex items-center justify-center px-4 rounded-sm"> | |
<h2 className="text-xl font-bold">Welcome {user.name}!</h2> | |
</div> | |
<div className="w-auto rounded-md shadow"> | |
<button | |
onClick={() => logout()} | |
className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-yellow-600 hover:bg-yellow-700 md:py-4 md:text-lg md:px-10" | |
> | |
Log Out | |
</button> | |
</div> | |
</div> | |
<div className="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start"></div> | |
<div className="grid grid-cols-2 gap-6"> | |
<form> | |
<div className="shadow overflow-hidden sm:rounded-md"> | |
<div className="px-4 py-5 bg-white sm:p-6"> | |
<div className="flex flex-col space-y-4"> | |
<div> | |
<label | |
htmlFor="title" | |
className="block text-sm font-medium text-gray-700" | |
> | |
Title | |
</label> | |
<input | |
autoComplete="off" | |
onChange={onChange} | |
type="text" | |
name="title" | |
id="title" | |
className="mt-1 focus:ring-yellow-500 focus:border-yellow-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" | |
/> | |
</div> | |
<div> | |
<label | |
htmlFor="description" | |
className="block text-sm font-medium text-gray-700" | |
> | |
Description | |
</label> | |
<input | |
type="text" | |
autoComplete="off" | |
name="description" | |
onChange={onChange} | |
id="description" | |
className="mt-1 focus:ring-yellow-500 focus:border-yellow-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" | |
/> | |
</div> | |
<div> | |
<label className="block text-sm font-medium text-gray-700"> | |
Image | |
</label> | |
<button | |
type="button" | |
className="w-auto px-8 py-2 flex items-center divide-x divide-gray-800 border border-gray-300 text-sm rounded-md text-gray-700 bg-white hover:bg-gray-100" | |
> | |
<span className="pr-2">Upload File</span> | |
<div className="pl-2"> | |
<svg | |
class="w-4 h-4 " | |
fill="none" | |
stroke="currentColor" | |
viewBox="0 0 24 24" | |
xmlns="http://www.w3.org/2000/svg" | |
> | |
<path | |
strokelineCap="round" | |
strokeLineJoin="round" | |
strokeWidth="2" | |
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" | |
></path> | |
</svg> | |
</div> | |
</button> | |
</div> | |
</div> | |
</div> | |
<div className="px-4 py-3 bg-gray-50 text-right sm:px-6"> | |
<button | |
type="submit" | |
className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-yellow-600 hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500" | |
> | |
Preview | |
</button> | |
</div> | |
</div> | |
</form> | |
<div> | |
{/* Add Preview Image Component Here */} | |
<div>Preview Image</div> | |
</div> | |
</div> | |
{/* Add Code Block Component Here */} | |
<div>Code Block</div> | |
</div> | |
); | |
}; | |
export default Home; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment