Skip to content

Instantly share code, notes, and snippets.

@DavidAmunga
Created September 25, 2021 19:16
Show Gist options
  • Save DavidAmunga/34f8f63729546bf48130c2509d529868 to your computer and use it in GitHub Desktop.
Save DavidAmunga/34f8f63729546bf48130c2509d529868 to your computer and use it in GitHub Desktop.
SitePreview Tutorial - Home JS Setup
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