SitePreview Tutorial - Home JS Setup

Home.js

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;