text: import Head from 'next/head'
  import Link from 'next/link'
  import Staticnav from '../components/staticNav'
  import Staticfooter from '../components/StaticFooter'
  import Image from 'next/image'
  import { avatars } from '../components/avatars'
  
  export default function Developer() {
    return (
      <>
        <Head>
          <title>Developer | Muzin</title>  
        </Head>
        <Staticnav />
        <div className='mt-16'>
          <div className='max-w-3xl mt-6 p-6 mx-auto'>
            <div className='text-green-500 font-black text-6xl md:text-8xl mt-6'>Developer</div>
            <div className='mt-6'>This developer documentation guides you through the application in the developer point of view. This page also guides you through the pre-requisites, you need to know before jumping into developing the application.</div>
            <div className='mt-24 text-gray-900 font-black text-4xl md:text-6xl'>Rules &amp; Regulations</div>
            <div className='mt-6'>Muzin being a public repository at GitHub, there are certain rules and regulations you need to follow as a developer. There are overall no restrictions that apply, exempting the ones those are listed below:</div>
            <div className='mt-12 tracking-wider uppercase font-semibold text-indigo-500 text-xl'>Decency</div>
            <div className='mt-2'>Adult content, cuss words, racism, sexism and anything else that the community of contributors deem indecent is not applicable in the repository. Contributors who upload or post indecent files, media, comments etc. will be blocked unconditionally from the repository and reported to GitHub.</div>
            <div className='mt-12 tracking-wider uppercase font-semibold text-indigo-500 text-xl'>Descriptive</div>
            <div className='mt-2'>Any changes made by any contributor to the app should have a brief title, and a proper description. A title and proper description helps other contributors to access at the nature and reason of change.</div>
            <div className='mt-12 tracking-wider uppercase font-semibold text-indigo-500 text-xl'>Major pull requests</div>
            <div className='mt-2'>Any major change commenced by any contributor should have a pull request before publishing the changed file. A major change includes large UI changes, adding huge functionality or changing a active major functionality which plays an important role in the functioning of the app. This allows contributors to decide on the change, which prevents sabotage and makes debugging easier.</div>
            <div className='mt-12 tracking-wider uppercase font-semibold text-indigo-500 text-xl'>Proper licenses</div>
            <div className='mt-2'>Contributors uploading media (.mp3, .jpg etc.), should have proper licenses from the creators, in order to prevent legal restriction on the app.</div>
            <div className='mt-12'>The above restrictions apply only when you're working on the GitHub repository. If you plan to download the source code and develop the app according to your own preferences, you are free to ignore the above rules and regulates.</div>
            <div className='mt-24 text-gray-900 font-black text-4xl md:text-6xl'>Pre-requisite knowledge</div>
            <div className='mt-6'>There are certain pre-requisite knowledge you need to know in advance to develop the Muzin app further. Those skills are mentioned below:</div>
            <div className='mt-12 tracking-wider uppercase font-semibold text-indigo-500 text-xl'>React</div>
            <div className='mt-2'>React is a JavaScript library for building user interfaces. React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when the data changes. With React, you can build encapsulated components that manage their own state, then compose them to make complex UIs.</div>
            <div className='mt-6'>Thus React is a very important skill you need to posses in order to develop Muzin as per your choice. If you're new to react, I suggest you head to the <a href='https://reactjs.org' target='_blank' className='text-blue-500 md:hover:underline'>React</a> official page and get started with the documentation.</div>
            <div className='mt-12 tracking-wider uppercase font-semibold text-indigo-500 text-xl'>NextJS</div>
            <div className='mt-2'>NextJS is a react framework for production. It gives you the best developer experience with all features you need for production: hybrid, static &amp; server rendering , TypeScript support, smart bundling route pre-fetching and more. No configuration required. NextJS has all the tools you need to make the web, faster. Multiple companies like Nike, Twitch, GitHub Copilot, Hulu etc. use NextJS to develop their web.</div>
            <div className='mt-6'>This app uses NextJS for faster and easier production. If you aren't hand in hand with <Link href="https://nextjs.org"><a className='text-blue-500 md:hover:underline' target='_blank'>NextJS</a></Link>, go to their official website and get started with the documentation.</div>
            <div className='mt-24 text-gray-900 font-black text-4xl md:text-6xl'>Contributors</div>
            <div className='mt-6'>If you are a contributor to the Muzin app development, head over to the source code of contributors located at <span class="p-1 rounded-md bg-gray-100 font-mono">components/contributors.js</span>. You will find an array named <span class="p-1 rounded-md bg-gray-100 font-mono">contributor</span>, which has the following structure:</div>
            <div className='mt-6 p-6 bg-gray-100 rounded-lg font-mono'>
            contributor = &#91;<br />
                <span className='px-4'></span>&#123;<br />
                <span className='px-8'></span>"img": "...",<br />
                <span className='px-8'></span>"name": "...",<br />
                <span className='px-8'></span>"contribution": "...",<br />
                <span className='px-8'></span>"url": "...",<br />
                <span className='px-4'></span>&#125;,<br />
            &#93;
            </div>
            <div className='mt-6'>Create a new parent object after the last parent object, with the above nested objects. For <span class="p-1 rounded-md bg-gray-100 font-mono">name</span>, set the value as a string containing your name, for <span class="p-1 rounded-md bg-gray-100 font-mono">contribution</span>, add a string value of your contribution in one sentence. The object <span class="p-1 rounded-md bg-gray-100 font-mono">url</span> stores your GitHub profile link.</div>
            <div className='mt-6'>When it comes to the image, you have two alternatives. You can either add your image, or opt out from adding one. Considering that the files are hosted in a public repository, you are free to not add your image. If you opt to add your image, place your profile picture in the <span class="p-1 rounded-md bg-gray-100 font-mono">public</span> directory, and then add your image path as a value to the <span class="p-1 rounded-md bg-gray-100 font-mono">img</span> object.</div>
            <div className='mt-6'>If you opt not to add your image, you can use one of the following avatars as your profile picture. The avatars are supplied by <a href="https://dicebear.com" target='_blank' className='text-blue-500 md:hover:underline'>DiceBear</a>.</div>
            <div className='md:grid grid-cols-3 gap-4 mt-6'>
              {avatars.map((avatar) => (
                <div className='p-6'>
                <div className='w-32 h-32 mx-auto block relative'>
                  <Image src={avatar} layout='fill' />
                </div>
                <div className='bg-gray-100 rounded-md p-1 font-mono w-max mx-auto'>{avatar}</div>
              </div>
              ))}
            </div>
            <div className='mt-6 bg-red-50 p-6 text-red-700'>
              <div className='font-bold text-xl'>Note:</div>
              <div className='mt-6'>Don't forget to put the <span class="p-1 rounded-md bg-red-100 font-mono">/</span> before your image path in the <span class="p-1 rounded-md bg-red-100 font-mono">img</span> object value, avatar or profile.</div>
            </div>
            <div className='mt-24 text-gray-900 font-black text-4xl md:text-6xl'>Running the app</div>
            <div className='mt-6'>In order to run the app player, just click the "Sign in" from the navbar or the "SIGN UP FOR FREE" from home.</div>
          </div>
        </div>
        <Staticfooter />
      </>
    )
  }