<repo_name>kimbcheh/anzsic-fairy<file_sep>/src/components/MainFooter.js
import { Footer, Text } from 'grommet'

function MainFooter() {
 return (
  <Footer background='brand' direction='column' pad='small'>
   <Text as='small'>
    DISCLAIMER: This is a just personal coding project and should not be relied
    on for making any business or legal decisions
   </Text>
   <Text as='small'>MADE BY <NAME></Text>
  </Footer>
 )
}

export default MainFooter
<file_sep>/src/App.js
import './App.css'
import { Grommet } from 'grommet'
import Main from './components/Main'

const theme = {
 global: {
  font: {
   family: 'Poppins',
  },
 },
}

function App() {
 return (
  <Grommet theme={theme}>
   <Main />
  </Grommet>
 )
}

export default App
<file_sep>/src/components/MainHeader.js
import { Header, Heading } from 'grommet'

function MainHeader() {
 return (
  <Header background='brand' direction='column'>
   <Heading size='small'>&#129498; ANZSIC Fairy</Heading>
  </Header>
 )
}

export default MainHeader
<file_sep>/src/components/SearchForm.js
import { Box, Button, Form, FormField, TextInput } from 'grommet'

function SearchForm({ setSearchTerm }) {
 return (
  <Box
   margin='medium'
   direction='row-responsive'
   justify='center'
   align='center'
  >
   <Form
    onSubmit={(e) => {
     let trimmedSearch = e.target.search.value.trim()
     setSearchTerm(trimmedSearch)
    }}
   >
    <FormField
     label="What's your primary business activity?"
     name='search'
     htmlFor='search'
     required
    >
     <TextInput
      id='search'
      name='search'
      placeholder='e.g. fishing'
     ></TextInput>
    </FormField>
    <Box direction='row' justify='between'>
     <Button
      type='reset'
      label='Reset'
      onClick={() => {
       setSearchTerm('')
      }}
     />
     <Button type='submit' label='Find your code!' primary />
    </Box>
   </Form>
  </Box>
 )
}

export default SearchForm
<file_sep>/src/components/Main.js
import MainHeader from './MainHeader'
import SearchForm from './SearchForm'
import MainAccordion from './MainAccordion'
import MainFooter from './MainFooter'
import { useState } from 'react'

function Main() {
 const [searchTerm, setSearchTerm] = useState('')
 return (
  <div>
   <MainHeader />
   <SearchForm setSearchTerm={setSearchTerm} />
   <MainAccordion />
   <MainFooter />
  </div>
 )
}

export default Main
<file_sep>/src/components/MainAccordion.js
import { Accordion, AccordionPanel, Anchor, Box, Text } from 'grommet'
import { CircleQuestion } from 'grommet-icons'

function MainAccordion() {
 return (
  <Box margin='medium' direction='column' justify='center' align='center'>
   <Text size='xlarge'>
    <CircleQuestion color='brand' /> Frequently Asked Questions
   </Text>
   <Accordion fill='true'>
    <AccordionPanel label='Is ANZSIC Fairy an official tool?'>
     <Box pad='small'>
      <Text>
       No! ANZSIC Fairy is a personal coding project by <NAME> using the
       ANZSIC code search API. For official information about ANZSIC codes
       please check out:
       <ul>
        <li>
         <Anchor
          href='https://www.abs.gov.au/ausstats/abs@.nsf/mf/1292.0'
          label='Australian Bureau of Statistics website'
         />
        </li>
        <li>
         <Anchor
          href='https://www.ato.gov.au/calculators-and-tools/business-industry-code-tool/anzsiccoder.aspx'
          label='Australian Taxation Office website'
         />
        </li>
       </ul>{' '}
      </Text>
     </Box>
    </AccordionPanel>
    <AccordionPanel label='What does ANZSIC stand for?'>
     <Box pad='small'>
      <Text>
       ANZSIC stands for the 'Australia and New Zealand Standard Industrial
       Classification' system.
      </Text>
     </Box>
    </AccordionPanel>
    <AccordionPanel label='What are ANZSIC codes used for?'>
     <Box pad='small'>
      <Text>
       The ANZSIC system classifies entities based on their main business
       activty and is used to collect and analyse data across industries. The
       system has four levels with increasing detail at each level:
       <ul>
        <li>broad industry classification denoted by a letter</li>
        <li>industry subdivision denoted by a two-digit code</li>
        <li>industry group denoted by a three-digit code</li>
        <li>industry class denoted by a four-digit code</li>
       </ul>
      </Text>
     </Box>
    </AccordionPanel>
    <AccordionPanel label='How do I decide which ANZSIC code to use?'>
     <Box pad='small'>
      <Text>
       Your primary ANZSIC code is pre-populated from your business' records on
       the Australian Business Register (ABR). You should ensure this is the
       four-digit industry class that best describes your main business
       activity, especially if your business works in multiple industries. For
       example, if 60% of your employees work in one section of the business,
       the day-to-day duties of this section would be your main activity.
      </Text>
     </Box>
    </AccordionPanel>
   </Accordion>
  </Box>
 )
}

export default MainAccordion
