Added carrousel with tutorial videos (#389)

Author: tolokoban

src/components/VirtualLab/labs-listing/no-vlabs.tsx

@@ -4,6 +4,7 @@ import { motion } from 'framer-motion';
 
 import { NewWindowAdd, UserCircle } from '@/components/icons/EditorIcons';
 import { ActionCard, HeroSection } from '@/components/VirtualLab/labs-listing/elements';
+import { TutorialsCarrousel } from '@/components/tutorials-carrousel';
 
 type Props = {
   showCreateSubscription?: boolean;
@@ -43,6 +44,7 @@ export default function VirtualSplashScreen({ showCreateSubscription = true }: P
           </motion.div>
         )}
       </div>
+      <TutorialsCarrousel />
     </div>
   );
 }

src/components/tutorials-carrousel/hooks.groq

@@ -0,0 +1,9 @@
+*[_type=="tutorial"][]
+{
+  title,
+  description,
+  "url": videoUrl,
+  "imageURL": thumbnail.asset->url,
+  "imageWidth": thumbnail.asset->metadata.dimensions.width,
+  "imageHeight": thumbnail.asset->metadata.dimensions.height
+}

src/components/tutorials-carrousel/hooks.ts

@@ -0,0 +1,42 @@
+import query from './hooks.groq';
+import { assertType, TypeDef } from '@/util/type-guards';
+import { useSanity } from '@/services/sanity';
+import { logError } from '@/util/logger';
+
+export function useSanityContentForTutorialsList() {
+  return useSanity(query, isContentForTutorialsList) ?? [];
+}
+
+export interface ContentForTutorialItem {
+  url: string;
+  title: string;
+  description: string;
+  imageURL: string;
+  imageWidth: number;
+  imageHeight: number;
+}
+
+function isContentForTutorialsList(data: unknown): data is ContentForTutorialItem[] {
+  const typeStringOrNull: TypeDef = ['|', 'string', 'null'];
+  try {
+    assertType(
+      data,
+      [
+        'array',
+        {
+          url: 'string',
+          title: typeStringOrNull,
+          description: typeStringOrNull,
+          imageURL: 'string',
+          imageWidth: 'number',
+          imageHeight: 'number',
+        },
+      ],
+      'ContentForTutorialsList'
+    );
+    return true;
+  } catch (ex) {
+    logError(ex);
+    return false;
+  }
+}

src/components/tutorials-carrousel/index.ts

@@ -0,0 +1 @@
+export * from './tutorials-carrousel';

src/components/tutorials-carrousel/navigation/index.ts

@@ -0,0 +1 @@
+export * from './navigation';

src/components/tutorials-carrousel/navigation/navigation.module.css

@@ -0,0 +1,27 @@
+.navigation {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 8px;
+}
+
+.navigation > button.page {
+  content: '';
+  width: 24px;
+  height: 6px;
+  border-radius: 99vmax;
+  background-color: #096dd9;
+}
+
+.navigation > button.page.selected {
+  background-color: #fff;
+}
+
+.navigation > button.arrow {
+  width: 3em;
+  display: grid;
+  place-items: center;
+}

src/components/tutorials-carrousel/navigation/navigation.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { classNames } from '@/util/utils';
+import { IconChevronLeft } from '@/components/LandingPage/icons/IconChevronLeft';
+import { IconChevronRight } from '@/components/LandingPage/icons/IconChevronRight';
+
+import styles from './navigation.module.css';
+
+export interface NavigationProps {
+  className?: string;
+  count: number;
+  value: number;
+  onChange(value: number): void;
+}
+
+export function Navigation({ className, count, value, onChange }: NavigationProps) {
+  const handleMoveLeft = () => {
+    onChange((value + count - 1) % count);
+  };
+  const handleMoveRight = () => {
+    onChange((value + 1) % count);
+  };
+
+  return (
+    <nav className={classNames(className, styles.navigation)}>
+      <button
+        className={styles.arrow}
+        type="button"
+        onClick={handleMoveLeft}
+        aria-label="Previous card"
+      >
+        <IconChevronLeft />
+      </button>
+      {new Array(count).fill(0).map((_, index) => (
+        <button
+          className={classNames(styles.page, index === value && styles.selected)}
+          // eslint-disable-next-line react/no-array-index-key
+          key={index}
+          onClick={() => onChange(index)}
+          type="button"
+          aria-label={`Go to card #${index + 1}`}
+        />
+      ))}
+      <button
+        className={styles.arrow}
+        type="button"
+        onClick={handleMoveRight}
+        aria-label="Next card"
+      >
+        <IconChevronRight />
+      </button>
+    </nav>
+  );
+}

src/components/tutorials-carrousel/scroll.ts

@@ -0,0 +1,8 @@
+export function scrollCardIntoView(container: HTMLDivElement, cardIndex: number) {
+  const node = container.querySelectorAll('a').item(cardIndex);
+  if (node) {
+    node.scrollIntoView({
+      behavior: 'smooth',
+    });
+  }
+}

src/components/tutorials-carrousel/tutorial-card/index.ts

@@ -0,0 +1 @@
+export * from './tutorial-card';

src/components/tutorials-carrousel/tutorial-card/play-icon.tsx

@@ -0,0 +1,14 @@
+export function PlayIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="-150 -150 300 300"
+      preserveAspectRatio="xMidYMid meet"
+    >
+      <g fill="currentcolor" stroke="currentcolor" strokeWidth="10" strokeLinejoin="round">
+        <circle fill="none" cx="0" cy="0" r="60" />
+        <path d="M30,0L-20,25,-20,-25Z" />
+      </g>
+    </svg>
+  );
+}