Refactoring hero banner feature

1 files changed, 35 insertions, 0 deletions

diff --git a/src/components/ui/HeroBannerSecondary.jsx b/src/components/ui/HeroBannerSecondary.jsx
new file mode 100644
index 00000000..a3227002
--- /dev/null
+++ b/src/components/ui/HeroBannerSecondary.jsx
@@ -0,0 +1,35 @@
+import Link from '@/core/components/elements/Link/Link'
+import { getRandomInt } from '@/utils/getRandomInt'
+import Image from 'next/image'
+import { useMemo } from 'react'
+import { useQuery } from 'react-query'
+import { HeroBannerSkeleton } from '../skeleton/BannerSkeleton'
+import { BannerApi } from '@/api/BannerApi'
+
+const HeroBannerSecondary = () => {
+  const heroBannerSecondary = useQuery('heroBannerSecondary', BannerApi({ type: 'index-a-2' }))
+
+  const randomIndex = useMemo(() => {
+    if (!heroBannerSecondary.data) return null
+    const length = heroBannerSecondary.data?.length
+    return getRandomInt(length)
+  }, [heroBannerSecondary.data])
+
+  if (heroBannerSecondary.isLoading) return <HeroBannerSkeleton />
+
+  return (
+    heroBannerSecondary.data && (
+      <Link href={heroBannerSecondary.data[randomIndex].url} className='h-full'>
+        <Image
+          src={heroBannerSecondary.data[randomIndex].image}
+          width={512}
+          height={1024}
+          alt={heroBannerSecondary.data[randomIndex].name}
+          className='object-cover object-center h-full'
+        />
+      </Link>
+    )
+  )
+}
+
+export default HeroBannerSecondary