Hook Example -> 2

import useFetchAllSnippets from '@/hooks/useFetchAllSnippets'
import Snippet from '@/types/Snippet'
import SnippetItem from '@/components/snippet/SnippetItem'
import React from 'react'

const SnippetList = () => {
  const { snippets, isError, isLoading } = useFetchAllSnippets()

  if (isError) return <div>failed to load snippets</div>
  if (isLoading) return <div>loading snippets...</div>

  return (
    <div className="mt-4 md:w-10/12">
      <h1 className="sr-only">Recent snippets</h1>
      <ul role="list" className="space-y-4">
        {snippets.data.map((snippet: Snippet) => (
          <React.Fragment key={snippet.id}>
            <SnippetItem snippet={snippet} />
          </React.Fragment>
        ))}
      </ul>
    </div>
  )
}

export default SnippetList