Merge pull request #203 from w3bdesign/development

Featured projects
w3bdesign · Jul 21, 2024 · 8da0b0e · 8da0b0e
2 parents 693ae11 + 8b871db
commit 8da0b0e
Show file tree

Hide file tree

Showing 4 changed files with 289 additions and 224 deletions.
diff --git a/src/app/prosjekter/page.tsx b/src/app/prosjekter/page.tsx
@@ -2,20 +2,34 @@ import Header from "@/components/Layout/Header.component";
 import PageHeader from "@/components/UI/PageHeader.component";
 import ProsjektCard from "@/components/Prosjekter/ProsjektCard.component";
 
-import { projectsQuery } from "@/lib/sanity/queries";
 import { client } from "@/lib/sanity/client";
 
 import type { Project } from "@/types/sanity.types";
-import { Metadata } from "next/types";
+import type { Metadata } from "next/types";
 
 export const metadata: Metadata = {
   title: "Prosjekter - Dfweb",
   description: "Daniel Fjeldstad | Frontend Web Utvikler | Portefølje",
 };
 
+const projectsQuery = `*[_type == "project"] | order(featured desc, featureOrder asc, _createdAt desc) {
+  id,
+  name,
+  description,
+  subdescription,
+  projectimage,
+  urlwww,
+  urlgithub,
+  featured,
+  featureOrder
+}`;
+
 export default async function Prosjekter() {
   const posts: Project[] = await client.fetch(projectsQuery);
 
+  const featuredProjects = posts.filter((project) => project.featured);
+  const nonFeaturedProjects = posts.filter((project) => !project.featured);
+
   return (
     <>
       <Header />
@@ -25,10 +39,21 @@ export default async function Prosjekter() {
         className="mt-32 bg-graybg"
       >
         <PageHeader>Prosjekter</PageHeader>
-        <div className="container mx-auto grid grid-cols-1 sm:grid-cols-1 md:grid-cols-1 xl:grid-cols-2 gap-8">
-          {posts?.map((project) => (
-            <ProsjektCard key={project.id} {...project} />
-          ))}
+        <div className="container mx-auto">
+          {featuredProjects.length > 0 && (
+            <div className="mb-12">
+              <div className="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-1 xl:grid-cols-2 gap-8">
+                {featuredProjects.map((project) => (
+                  <ProsjektCard key={project.id} {...project} />
+                ))}
+              </div>
+            </div>
+          )}
+          <div className="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-1 xl:grid-cols-2 gap-8">
+            {nonFeaturedProjects.map((project) => (
+              <ProsjektCard key={project.id} {...project} />
+            ))}
+          </div>
         </div>
       </main>
     </>