70 lines
2.3 KiB
TypeScript
70 lines
2.3 KiB
TypeScript
import React, {useState} from 'react'
|
|
import Image from 'next/image'
|
|
import backgroundPic from '../public/unspash_image.jpg'
|
|
import { Inter } from 'next/font/google'
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { faGem } from "@fortawesome/free-solid-svg-icons";
|
|
import navigationContent from '../lib/navigationContent'
|
|
import Modal from 'react-modal';
|
|
const inter = Inter({ subsets: ['latin'] })
|
|
|
|
export default function Home() {
|
|
const customStyles = {
|
|
overlay: {
|
|
backgroundColor: 'rgba(0, 0, 0, 0.6)'
|
|
},
|
|
content: {
|
|
top: '50%',
|
|
left: '50%',
|
|
right: 'auto',
|
|
bottom: 'auto',
|
|
marginRight: '-50%',
|
|
transform: 'translate(-50%, -50%)',
|
|
backgroundColor: 'gray'
|
|
}
|
|
}
|
|
|
|
const [showModal, setShowModal] = useState(false);
|
|
const [modalData, setModalData] = useState<{name: string, url: string, content?: any}>({
|
|
name: '',
|
|
url: '',
|
|
content: ''
|
|
});
|
|
|
|
const renderNav = (navData: Array<{name: string, url: string, content: (string | React.ElementType | null)}>) => {
|
|
return navData.map((data, idx) => (
|
|
<span
|
|
onClick={() => {
|
|
setShowModal(true)
|
|
setModalData(data);
|
|
}}
|
|
key={idx}
|
|
className='p-4 border-white text-white border-2 hover:cursor-pointer hover:bg-white hover:bg-opacity-10'
|
|
>
|
|
<a href={data.url}>{data.name}</a>
|
|
</span>
|
|
));
|
|
};
|
|
|
|
return (
|
|
<div className='relative'>
|
|
<div className='absolute tablet:w-full h-full bg-cover'>
|
|
<Image src={backgroundPic} alt="record background"/>
|
|
<div className='flex flex-col justify-center text-center'>
|
|
{/* <FontAwesomeIcon width={25} height={50} icon={faGem} className="fas fa-gem" style={{ color: "red" }} /> */}
|
|
<div className='w-full grid grid-row-4 justify-center h-1/2'>
|
|
<div className='col-span-2 w-1/2 border-t-2 border-white border-r-2'></div>
|
|
<div className='col-span-2 h-1/2 w-1/2 border-t-2 border-white border-l-2'></div>
|
|
</div>
|
|
<div className='flex flex-row justify-center'>
|
|
{renderNav(navigationContent)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Modal isOpen={showModal} contentLabel='' style={customStyles} onRequestClose={() => setShowModal(false)}>
|
|
{modalData.content}
|
|
</Modal>
|
|
</div>
|
|
)
|
|
}
|