feat(ktl-2781): implement filtering for cases

Author: berezinant

blocks/case-studies/card/case-studies-card.module.css

@@ -7,7 +7,6 @@
   background: #fff;
   box-shadow: 0 2px 8px rgba(0,0,0,0.06);
   border: 1px solid rgba(0,0,0,0.12);
-  max-width: 500px;
   box-sizing: border-box;
 }
 

blocks/case-studies/card/case-studies-card.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import styles from './case-studies-card.module.css';
 import { AndroidIcon, AppleIcon, ServerIcon, ComputerIcon, GlobusIcon } from '@rescui/icons';
-import { CaseStudyItem, CaseStudyType, isExternalCaseStudy, Platform } from '../case-studies';
-
+import { CaseItem, CaseType, isExternalCase, CasePlatform } from '../case-studies';
 
 /**
  * Resolve asset path from YAML:
@@ -38,30 +37,30 @@ const mdToHtml = (md: string) => {
     return withLinks;
 };
 
-const badgeText: Record<CaseStudyType, string> = {
+const badgeText: Record<CaseType, string> = {
     'multiplatform': 'Kotlin Multiplatform',
     'server-side': 'Server-side'
 };
 
-const badgeClass: Record<CaseStudyType, string> = {
+const badgeClass: Record<CaseType, string> = {
     'multiplatform': 'badgeMultiplatform',
     'server-side': 'badgeServerSide'
 };
 
 // Platform icon path builder. If you keep icons in (for example) /images/platforms/*.svg,
 // they’ll be resolved automatically by key. If an icon is missing, we still render the label.
-const getPlatformIcon = (p: Platform) => {
+const getPlatformIcon = (p: CasePlatform) => {
     switch (p) {
         case 'android':
-            return <AndroidIcon/>;
+            return <AndroidIcon />;
         case 'ios':
-            return <AppleIcon/>;
+            return <AppleIcon />;
         case 'desktop':
-            return <ComputerIcon/>;
+            return <ComputerIcon />;
         case 'frontend':
-            return <GlobusIcon/>;
+            return <GlobusIcon />;
         case 'backend':
-            return <ServerIcon/>;
+            return <ServerIcon />;
         case 'compose-multiplatform':
             return <img className={styles.platformIcon} src={'/images/platforms/compose-multiplatform.svg'}
                         alt="Compose Multiplatform icon"
@@ -71,12 +70,11 @@ const getPlatformIcon = (p: Platform) => {
     }
 };
 
-type Props = {
-    item: CaseStudyItem;
+type Props = CaseItem &{
     className?: string;
 };
 
-export const CaseStudyCard: React.FC<Props> = ({ item, className }) => {
+export const CaseStudyCard: React.FC<Props> = ({ className, ...item }) => {
     const logos = item.logo ?? [];
     const logoSrc1 = resolveAssetPath(logos[0]);
     const logoSrc2 = resolveAssetPath(logos[1]);
@@ -159,7 +157,7 @@ export const CaseStudyCard: React.FC<Props> = ({ item, className }) => {
                     })}
                 </div>
             )}
-            {(isExternalCaseStudy(item)) ? (
+            {(isExternalCase(item)) ? (
                 <div className={styles.actions}>
                     {item.externalLink && (
                         <a
@@ -218,14 +216,10 @@ function hideBrokenIcon(img: HTMLImageElement) {
 /**
  * Humanize platform name for label.
  */
-function humanizePlatform(p: Platform): string {
+function humanizePlatform(p: CasePlatform): string {
     switch (p) {
         case 'compose-multiplatform':
             return 'Compose Multiplatform';
-        case 'frontend':
-            return 'Frontend';
-        case 'backend':
-            return 'Backend';
         case 'ios':
             return 'iOS';
         default:

blocks/case-studies/case-studies.ts

@@ -1,14 +1,26 @@
-export type CaseStudyType = 'multiplatform' | 'server-side';
+export type CaseType = 'multiplatform' | 'server-side';
 
-type CaseStudyDestination = 'internal' | 'external';
+export type  CaseTypeSwitch = 'all' | CaseType;
 
-export type Platform =
-    | 'android'
-    | 'ios'
-    | 'desktop'
-    | 'frontend'
-    | 'backend'
-    | 'compose-multiplatform';
+type CaseDestination = 'internal' | 'external';
+
+export const Platforms = [
+    'android',
+    'ios',
+    'desktop',
+    'frontend',
+    'backend',
+] as const;
+
+export const PlatformNames: Record<typeof Platforms[number], string> = {
+    "android": "Android",
+    "ios": "iOS",
+    "desktop": "Desktop",
+    "frontend": "Frontend",
+    "backend": "Backend",
+}
+
+export type CasePlatform = typeof Platforms[number] | 'compose-multiplatform';
 
 type Signature = {
     line1: string;
@@ -27,36 +39,36 @@ type ImageMedia = {
 
 type Media = YoutubeMedia | ImageMedia;
 
-interface CaseStudyItemBase {
+interface CaseItemBase {
     id: string;
-    type: CaseStudyType;
+    type: CaseType;
     description: string;
-    destination: CaseStudyDestination;
+    destination: CaseDestination;
     logo?: string[];
     signature?: Signature;
-    platforms?: Platform[];
+    platforms?: CasePlatform[];
     media?: Media;
     featuredOnMainPage?: boolean;
     slug?: string;
     externalLinkText?: string;
 }
 
-export interface ExternalDestinationCaseStudyItem extends CaseStudyItemBase {
+export interface ExternalDestinationCaseItem extends CaseItemBase {
     destination: 'external';
     // required when destination === 'external'
     externalLink: string;
 }
 
-export interface InternalDestinationCaseStudyItem extends CaseStudyItemBase {
+export interface InternalDestinationCaseItem extends CaseItemBase {
     destination: 'internal';
     // required when destination === 'internal'
     pageContentPath: string;
 }
 
-export type CaseStudyItem =
-    | ExternalDestinationCaseStudyItem
-    | InternalDestinationCaseStudyItem;
+export type CaseItem =
+    | ExternalDestinationCaseItem
+    | InternalDestinationCaseItem;
 
-export function isExternalCaseStudy(item: CaseStudyItem): item is ExternalDestinationCaseStudyItem {
+export function isExternalCase(item: CaseItem): item is ExternalDestinationCaseItem {
     return item.destination === 'external';
 }

blocks/case-studies/filter/case-studies-filter.module.css

@@ -1,49 +1,42 @@
-.wrapper {
-  padding: 32px 0;
-  color: #ffffff; /* ensure white text */
-}
-
-.title {
-  margin: 0 0 16px 0;
-  color: inherit;
-}
-
-.inner {
+.content {
+  padding: 24px 0 72px;
   display: grid;
-  grid-template-columns: 1fr;
-  gap: 24px;
+  grid-template-columns: 1fr 1fr;
+  grid-column-gap: 80px;
+  grid-template-areas:
+    "group1 group1"
+    "group2 group3";
+  @media (width <= 1000px) {
+    display: block;
+    grid-template-columns: unset;
+    grid-template-areas: unset;
+  }
 }
 
-.group {
-  background: #0f0f0f;
-  border-radius: 12px;
-  padding: 16px;
+.group:first-child {
+  grid-area: group1;
 }
 
-.groupType {
-  /* will span both columns on desktop */
+.group:not(:last-child) {
+  margin-bottom: 32px;
 }
 
 .groupTitle {
-  margin: 0 0 12px 0;
-  color: inherit;
+  margin: 0 0 8px;
 }
 
 .checkboxes {
   display: flex;
-  flex-wrap: wrap;
-  gap: 8px 16px;
   align-items: center;
+  gap: 8px 24px;
 }
 
-.switcherSmall {
-}
+.checkbox {
+  display: flex;
+  align-items: center;
 
-@media (min-width: 768px) {
-  .inner {
-    grid-template-columns: repeat(2, 1fr);
-  }
-  .groupType {
-    grid-column: 1 / -1;
+  & span + span {
+    display: flex;
+    gap: 8px;
   }
 }