From fff934c96b9dba91817640c3f1e13fb2c4e07886 Mon Sep 17 00:00:00 2001
From: bozzhik <bozzhik@ya.ru>
Date: Sat, 20 Apr 2024 04:14:50 +0300
Subject: [PATCH] init `Projects` index block

---
 next.config.mjs                       | 12 +++++-
 src/app/page.tsx                      |  2 +
 src/components/App/index/Projects.tsx | 62 +++++++++++++++++++++++++++
 3 files changed, 74 insertions(+), 2 deletions(-)
 create mode 100644 src/components/App/index/Projects.tsx

diff --git a/next.config.mjs b/next.config.mjs
index 4678774..5f60425 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,4 +1,12 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        hostname: 'cdn.sanity.io',
+      },
+    ],
+  },
+}
 
-export default nextConfig;
+export default nextConfig
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 373c1a1..37a20b7 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,10 +1,12 @@
 import Container from '#/Global/Container'
 import Hero from '##/index/Hero'
+import Projects from '@/components/App/index/Projects'
 
 export default function Index() {
   return (
     <Container>
       <Hero />
+      <Projects />
     </Container>
   )
 }
diff --git a/src/components/App/index/Projects.tsx b/src/components/App/index/Projects.tsx
new file mode 100644
index 0000000..0581a27
--- /dev/null
+++ b/src/components/App/index/Projects.tsx
@@ -0,0 +1,62 @@
+import {unstable_noStore as noStore} from 'next/cache'
+import {client, urlForImage} from '@/lib/sanity'
+
+import Link from 'next/link'
+import Image from 'next/image'
+
+import {Text} from '#/UI/Text'
+
+interface Project {
+  name: string
+  link?: string
+  id: number
+  description: string
+  image: Array<{asset: {url: string}}>
+  in_development: boolean
+}
+
+const getData = async (): Promise<Project[]> => {
+  noStore()
+
+  const query = `
+    *[_type == 'project'] {
+        name,
+        link,
+        id,
+        description,
+        image,
+        in_development,
+    }`
+
+  const data: Project[] = await client.fetch(query)
+  return data
+}
+
+const Projects = async () => {
+  const projects: Project[] = await getData()
+
+  if (!projects) {
+    return <mark>Произошла ошибка при получении данных!</mark>
+  }
+
+  return (
+    <section data-section="projects-index" className="mt-8">
+      <Text type="heading">my projects</Text>
+
+      {projects.map((slide, index) => (
+        <article className="space-y-5 mt-5" key={index}>
+          <div className="s-32">
+            <Image quality={100} priority={true} className="object-cover w-full h-full" src={urlForImage(slide.image).url()} width={100} height={100} alt={slide.name} />
+          </div>
+
+          <div>
+            <Text type="heading">{slide.name}</Text>
+            <Text>{slide.description}</Text>
+          </div>
+        </article>
+      ))}
+    </section>
+  )
+}
+
+export default Projects