Enable projects selection

app/src/routes/projects/ProjectsTab/Carousel.tsx

@@ -0,0 +1,130 @@
+import { ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons';
+import useEmblaCarousel from 'embla-carousel-react';
+import React, { useCallback, useEffect, useState } from 'react';
+
+interface EmblaCarouselProps {
+    slides: { id: number; imgSrc: string; title: string }[];
+    onSlideChange: (index: number) => void;
+}
+
+const EmblaCarousel: React.FC<EmblaCarouselProps> = ({ slides, onSlideChange }) => {
+    const [emblaRef, emblaApi] = useEmblaCarousel({
+        axis: 'y',
+        loop: false,
+        align: 'center',
+        containScroll: 'trimSnaps',
+        skipSnaps: false,
+        dragFree: false,
+    });
+    const [prevBtnEnabled, setPrevBtnEnabled] = useState(false);
+    const [nextBtnEnabled, setNextBtnEnabled] = useState(false);
+    const [currentIndex, setCurrentIndex] = useState(0);
+
+    const scrollPrev = useCallback(() => emblaApi && emblaApi.scrollPrev(), [emblaApi]);
+    const scrollNext = useCallback(() => emblaApi && emblaApi.scrollNext(), [emblaApi]);
+
+    const onSelect = useCallback(() => {
+        if (!emblaApi) {
+            return;
+        }
+        setPrevBtnEnabled(emblaApi.canScrollPrev());
+        setNextBtnEnabled(emblaApi.canScrollNext());
+        setCurrentIndex(emblaApi.selectedScrollSnap());
+        onSlideChange(emblaApi.selectedScrollSnap());
+    }, [emblaApi, onSlideChange]);
+
+    useEffect(() => {
+        if (!emblaApi) {
+            return;
+        }
+        onSelect();
+        emblaApi.on('select', onSelect);
+        emblaApi.on('reInit', onSelect);
+    }, [emblaApi, onSelect]);
+
+    useEffect(() => {
+        const handleKeyDown = (event: KeyboardEvent) => {
+            if (event.key === 'ArrowUp') {
+                event.preventDefault();
+                scrollPrev();
+            } else if (event.key === 'ArrowDown') {
+                event.preventDefault();
+                scrollNext();
+            }
+        };
+
+        window.addEventListener('keydown', handleKeyDown);
+
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [scrollPrev, scrollNext]);
+
+    return (
+        <div
+            className="embla relative h-[calc(100vh-5.5rem)] overflow-hidden"
+            style={{ zIndex: 0 }}
+        >
+            <div
+                className="embla__viewport h-full absolute inset-0"
+                ref={emblaRef}
+                style={{
+                    transition: 'transform 0.2s cubic-bezier(0.25, 1, 0.5, 1)',
+                    zIndex: -1,
+                }}
+            >
+                <div className="embla__container h-full">
+                    {slides.map((slide, index) => (
+                        <div
+                            key={slide.id}
+                            className="embla__slide h-full relative flex items-center justify-center"
+                            style={{
+                                flex: '0 0 90%',
+                                minWidth: 0,
+                                margin: '0 -5%',
+                            }}
+                        >
+                            <img
+                                src={slide.imgSrc}
+                                alt={slide.title}
+                                className="rounded-lg object-contain transition-all duration-300"
+                                style={{
+                                    maxWidth: '580px',
+                                    width: '100%',
+                                    height: 'auto',
+                                }}
+                            />
+                        </div>
+                    ))}
+                </div>
+            </div>
+            <div className="embla__buttons absolute left-14 top-1/2 transform -translate-y-1/2 flex flex-col gap-4 z-10 items-center">
+                <button
+                    className="embla__button embla__button--prev"
+                    onClick={scrollPrev}
+                    disabled={!prevBtnEnabled}
+                >
+                    <ChevronUpIcon
+                        className={`w-7 h-7 ${prevBtnEnabled ? 'text-white' : 'text-gray-400'}`}
+                    />
+                </button>
+                <div className="flex flex-row space-x-1 text-white items-center">
+                    <span className="text-active">{currentIndex + 1}</span>
+                    <span className="text-sm text-gray-500"> of </span>
+                    <span className="text-active text-active">{slides.length}</span>
+                </div>
+                <button
+                    className="embla__button embla__button--next"
+                    onClick={scrollNext}
+                    disabled={!nextBtnEnabled}
+                >
+                    <ChevronDownIcon
+                        className={`w-7 h-7 ${nextBtnEnabled ? 'text-white' : 'text-gray-400'}`}
+                    />
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default EmblaCarousel;

app/src/routes/projects/ProjectsTab/index.tsx

@@ -0,0 +1,81 @@
+import { Button } from '@/components/ui/button';
+import { DotsVerticalIcon, Pencil2Icon } from '@radix-ui/react-icons';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useState } from 'react';
+import EmblaCarousel from './Carousel';
+
+export function ProjectsTab() {
+    const [currentSlide, setCurrentSlide] = useState(0);
+    const [direction, setDirection] = useState(0);
+
+    const slides = [
+        { id: 0, imgSrc: 'https://picsum.photos/id/237/200/300', title: 'Airbnb.com' },
+        { id: 1, imgSrc: 'https://picsum.photos/id/238/300/200', title: 'Netflix Clone' },
+        { id: 2, imgSrc: 'https://picsum.photos/id/239/500/500', title: 'Personal Portfolio' },
+    ];
+
+    const handleSlideChange = (index: number) => {
+        if (currentSlide === index) {
+            return;
+        }
+        setDirection(index > currentSlide ? 1 : -1);
+        setCurrentSlide(index);
+    };
+
+    const variants = {
+        enter: (direction: number) => ({
+            y: direction > 0 ? 20 : -20,
+            opacity: 0,
+        }),
+        center: {
+            y: 0,
+            opacity: 1,
+        },
+        exit: (direction: number) => ({
+            y: direction < 0 ? 20 : -20,
+            opacity: 0,
+        }),
+    };
+
+    return (
+        <div className="flex h-[calc(100vh-5.5rem)] w-full">
+            <div className="w-3/5">
+                <EmblaCarousel slides={slides} onSlideChange={handleSlideChange} />
+            </div>
+            <div className="w-2/5 flex flex-col justify-center items-start p-4 gap-6">
+                <AnimatePresence mode="wait" custom={direction}>
+                    <motion.p
+                        key={currentSlide}
+                        custom={direction}
+                        variants={variants}
+                        initial="enter"
+                        animate="center"
+                        exit="exit"
+                        transition={{ duration: 0.3 }}
+                        className="inline-block text-text-active text-title1"
+                    >
+                        {slides[currentSlide].title}
+                    </motion.p>
+                </AnimatePresence>
+                <div className="text-text flex flex-col md:flex-row gap-2 md:gap-7 text-small">
+                    <p>Last edited 3 days ago </p>
+                    <p> localhost: 3000</p>
+                </div>
+                <div className="flex flex-col sm:flex-row gap-3 sm:gap-5 w-full">
+                    <Button
+                        size="default"
+                        variant={'outline'}
+                        className="gap-2 bg-bg-active border border-border-active w-full lg:w-auto"
+                    >
+                        <Pencil2Icon />
+                        <p> Edit App </p>
+                    </Button>
+                    <Button size="default" variant={'ghost'} className="gap-2 w-full lg:w-auto">
+                        <DotsVerticalIcon />
+                        <p> Project settings</p>
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+}

app/src/routes/projects/SettingsTab/index.tsx

@@ -0,0 +1,3 @@
+export function SettingsTab() {
+    return <div className="flex h-[calc(100vh-5.5rem)] w-full">Settings</div>;
+}

app/src/routes/projects/TopBar/ModeToggle/index.tsx

@@ -0,0 +1,41 @@
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+
+const ModeToggle = ({
+    currentTab,
+    setCurrentTab,
+}: {
+    currentTab: 'projects' | 'settings';
+    setCurrentTab: (tab: 'projects' | 'settings') => void;
+}) => {
+    return (
+        <ToggleGroup
+            type="single"
+            value={currentTab}
+            onValueChange={(value) => {
+                if (value) {
+                    setCurrentTab(value as 'projects' | 'settings');
+                }
+            }}
+            className="mb-3 h-12"
+        >
+            <ToggleGroupItem
+                value="projects"
+                aria-label="Toggle Projects"
+                variant={'overline'}
+                className="flex items-end"
+            >
+                Projects
+            </ToggleGroupItem>
+            <ToggleGroupItem
+                value="settings"
+                aria-label="Toggle Settings"
+                variant={'overline'}
+                className="flex items-end"
+            >
+                Settings
+            </ToggleGroupItem>
+        </ToggleGroup>
+    );
+};
+
+export default ModeToggle;