Break projects grid into its own component

drips-network · Jan 14, 2025 · 806a7b4 · 806a7b4
1 parent fb58fef
commit 806a7b4
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 66 deletions.
diff --git a/src/routes/(pages)/app/(app)/components/default-explore-page.svelte b/src/routes/(pages)/app/(app)/components/default-explore-page.svelte
@@ -13,8 +13,6 @@
   import EtherscanIcon from '$lib/components/icons/Etherscan.svelte';
   import DripListIcon from '$lib/components/icons/DripList.svelte';
   import Section from '$lib/components/section/section.svelte';
-  import ProjectCard from '$lib/components/project-card/project-card.svelte'; // PROJECT_CARD_FRAGMENT,
-  import PrimaryColorThemer from '$lib/components/primary-color-themer/primary-color-themer.svelte';
   import { PUBLIC_NETWORK } from '$env/static/public';
   import walletStore from '$lib/stores/wallet/wallet.store';
   import AggregateFiatEstimate from '$lib/components/aggregate-fiat-estimate/aggregate-fiat-estimate.svelte';
@@ -28,8 +26,6 @@
   import DripListCard, {
     DRIP_LIST_CARD_FRAGMENT,
   } from '$lib/components/drip-list-card/drip-list-card.svelte';
-  import filterCurrentChainData from '$lib/utils/filter-current-chain-data';
-  import isClaimed from '$lib/utils/project/is-claimed';
   import { gql } from 'graphql-request';
   import type {
     DefaultExplorePageFeaturedDripListsFragment,
@@ -39,8 +35,8 @@
   import type { postsListingSchema } from '../../../../api/blog/posts/schema';
   import LatestNewsSection from './latest-news-section.svelte';
   import ConnectWalletPrompt from './connect-wallet-prompt.svelte';
-  import getProjectColor from './project-color';
   import RecentlyClaimedProjects from './recently-claimed-projects.svelte';
+  import ProjectsGrid from './projects-grid.svelte';
 
   const FEATURED_WEB_3_PROJECTS_ACCOUNT_IDS =
     {
@@ -175,17 +171,7 @@
     }}
   >
     <div class="horizontal-scroll">
-      <div class="projects-grid featured-projects">
-        {#each featuredProjects as project}
-          <div>
-            {#if isClaimed(filterCurrentChainData(project.chainData))}
-              <PrimaryColorThemer colorHex={getProjectColor(project)}>
-                <ProjectCard {project} />
-              </PrimaryColorThemer>
-            {/if}
-          </div>
-        {/each}
-      </div>
+      <ProjectsGrid projects={featuredProjects} />
     </div>
   </Section>
 
@@ -229,17 +215,7 @@
     }}
   >
     <div class="horizontal-scroll">
-      <div class="projects-grid featured-projects">
-        {#each featuredWeb3Projects as project}
-          <div>
-            {#if isClaimed(filterCurrentChainData(project.chainData))}
-              <PrimaryColorThemer colorHex={getProjectColor(project)}>
-                <ProjectCard {project} />
-              </PrimaryColorThemer>
-            {/if}
-          </div>
-        {/each}
-      </div>
+      <ProjectsGrid projects={featuredWeb3Projects} />
     </div>
   </Section>
 
@@ -299,18 +275,6 @@
     overflow-x: auto;
   }
 
-  @media (max-width: 767px) {
-    .featured-projects {
-      display: flex;
-      gap: 1rem;
-      padding: 4px;
-    }
-
-    .featured-projects > div {
-      width: 14rem;
-    }
-  }
-
   .drip-list-cards-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));

diff --git a/src/routes/(pages)/app/(app)/components/projects-grid.svelte b/src/routes/(pages)/app/(app)/components/projects-grid.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import PrimaryColorThemer from '$lib/components/primary-color-themer/primary-color-themer.svelte';
+  import ProjectCard from '$lib/components/project-card/project-card.svelte';
+  import filterCurrentChainData from '$lib/utils/filter-current-chain-data';
+  import isClaimed from '$lib/utils/project/is-claimed';
+  import type { DefaultExplorePageFeaturedProjectFragment } from './__generated__/gql.generated';
+  import getProjectColor from './project-color';
+
+  export let projects: DefaultExplorePageFeaturedProjectFragment[];
+</script>
+
+<div class="projects-grid">
+  {#each projects as project}
+    <div>
+      {#if isClaimed(filterCurrentChainData(project.chainData))}
+        <PrimaryColorThemer colorHex={getProjectColor(project)}>
+          <ProjectCard {project} />
+        </PrimaryColorThemer>
+      {/if}
+    </div>
+  {/each}
+</div>
+
+<style>
+  .projects-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
+    gap: 1rem;
+    max-width: 100%;
+    position: relative;
+    padding: 4px;
+  }
+
+  @media (max-width: 767px) {
+    .projects-grid {
+      display: flex;
+      gap: 1rem;
+      padding: 4px;
+    }
+
+    .projects-grid > div {
+      width: 14rem;
+    }
+  }
+</style>
diff --git a/src/routes/(pages)/app/(app)/components/recently-claimed-projects.svelte b/src/routes/(pages)/app/(app)/components/recently-claimed-projects.svelte
@@ -20,17 +20,12 @@
 
 <script lang="ts">
   import Section from '$lib/components/section/section.svelte';
-  import filterCurrentChainData from '$lib/utils/filter-current-chain-data';
-  import isClaimed from '$lib/utils/project/is-claimed';
-  import PrimaryColorThemer from '$lib/components/primary-color-themer/primary-color-themer.svelte';
   import BoxIcon from '$lib/components/icons/Box.svelte';
   import Box from '$lib/components/icons/Box.svelte';
   import type { DefaultExplorePageFeaturedProjectFragment } from './__generated__/gql.generated';
-  import getProjectColor from './project-color';
-  import ProjectCard, {
-    PROJECT_CARD_FRAGMENT,
-  } from '$lib/components/project-card/project-card.svelte';
+  import { PROJECT_CARD_FRAGMENT } from '$lib/components/project-card/project-card.svelte';
   import { gql } from 'graphql-request';
+  import ProjectsGrid from './projects-grid.svelte';
 
   export let projects: DefaultExplorePageFeaturedProjectFragment[];
 
@@ -55,15 +50,5 @@
   }}
   skeleton={{ loaded: true }}
 >
-  <div class="projects-grid">
-    {#each recentlyClaimedProjects as project}
-      <div>
-        {#if isClaimed(filterCurrentChainData(project.chainData))}
-          <PrimaryColorThemer colorHex={getProjectColor(project)}>
-            <ProjectCard {project} />
-          </PrimaryColorThemer>
-        {/if}
-      </div>
-    {/each}
-  </div>
+  <ProjectsGrid projects={recentlyClaimedProjects} />
 </Section>
diff --git a/src/styles/app.css b/src/styles/app.css
@@ -4,7 +4,6 @@
 @import 'colors.css';
 @import 'elevation.css';
 @import 'typography.css';
-@import 'projects.css';
 
 html.smoothscroll {
   scroll-behavior: smooth;

diff --git a/src/styles/projects.css b/src/styles/projects.css