Merge pull request #48 from binhtran432k/feature/review

feat: enhance review

Author: binhtddev

bun.lockb

@@ -48,6 +48,7 @@
     "vite-tsconfig-paths": "^4.2.1"
   },
   "dependencies": {
-    "clsx": "^2.1.0"
+    "clsx": "^2.1.0",
+    "swiper": "^11.1.9"
   }
 }

package.json

@@ -0,0 +1,106 @@
+import {
+  component$,
+  useSignal,
+  useStyles$,
+  useVisibleTask$,
+} from "@builder.io/qwik";
+import Review, { type ReviewData } from "./review";
+import Swiper from "swiper";
+import { Pagination, Navigation } from "swiper/modules";
+
+const reviews: ReviewData[] = [];
+import swiperStyles from "swiper/swiper-bundle.css?inline";
+
+export default component$(() => {
+  if (reviews.length === 0) {
+    return <></>;
+  }
+  useStyles$(swiperStyles);
+  useStyles$(`
+  .swiper-slide {
+    filter: blur(2px) !important;
+    transform: scale(0.8) !important;
+    transition: all 0.2s;
+  }
+  .swiper-slide-active {
+    filter: blur(0) !important;
+    transform: scale(1) !important;
+  }
+  .swiper-pagination {
+    position: static;
+  }
+  .swiper-pagination-bullet {
+    width: 2.5rem;
+    height: 0.25rem;
+    border-radius: 50px;
+    background: #fff;
+  }
+  .swiper-pagination-bullet-active {
+    width: 4rem;
+  }
+  `);
+
+  const swiperRef = useSignal<HTMLElement>();
+  const nextRef = useSignal<HTMLElement>();
+  const prevRef = useSignal<HTMLElement>();
+  const paginationRef = useSignal<HTMLElement>();
+
+  // eslint-disable-next-line qwik/no-use-visible-task
+  useVisibleTask$(() => {
+    new Swiper(swiperRef.value!, {
+      spaceBetween: 30,
+      pagination: {
+        el: paginationRef.value,
+        type: "bullets",
+        clickable: true,
+      },
+      navigation: {
+        prevEl: prevRef.value,
+        nextEl: nextRef.value,
+      },
+      slidesPerView: 1,
+      breakpoints: {
+        768: { slidesPerView: 2 },
+        1280: { slidesPerView: 3 },
+      },
+      modules: [Pagination, Navigation],
+      centeredSlides: true,
+      slideToClickedSlide: true,
+    });
+  });
+
+  return (
+    <section
+      class="review-slide swiper container m-auto my-4 min-h-[400px] select-none"
+      ref={swiperRef}
+    >
+      <div class="swiper-wrapper">
+        {reviews.map((review) => (
+          <div key={review.name} class="swiper-slide">
+            <Review review={review} />
+          </div>
+        ))}
+      </div>
+      <div class="mt-8 flex justify-center">
+        <div class="flex gap-2">
+          <button
+            class="group rounded-lg border-[1px] px-4 py-2 disabled:opacity-50"
+            ref={prevRef}
+          >
+            <div class="h-3 w-3 translate-x-1/4 rotate-45 border-b-2 border-s-2 border-light" />
+          </button>
+          <button
+            class="group rounded-lg border-[1px] px-4 py-2 disabled:opacity-50"
+            ref={nextRef}
+          >
+            <div class=" h-3 w-3 -translate-x-1/4 rotate-45 border-e-2 border-t-2 border-light" />
+          </button>
+        </div>
+        <div
+          class="swiper-pagination hidden md:block"
+          ref={paginationRef}
+        ></div>
+      </div>
+    </section>
+  );
+});

src/components/review-slide/review-slide.tsx

@@ -0,0 +1,33 @@
+import { component$ } from "@builder.io/qwik";
+
+export interface ReviewData {
+  content: string;
+  name: string;
+  job: string;
+  img: string;
+}
+
+export default component$(({ review }: { review: ReviewData }) => {
+  return (
+    <section class="review flex gap-1 px-2">
+      <div class="font-serif text-6xl text-secondary">&ldquo;</div>
+      <div class="flex flex-col border-t-[1px] border-t-light pt-6">
+        <div class="flex items-start gap-2">
+          <div class="review__content first-letter:font-serif first-letter:text-3xl first-letter:text-secondary">
+            {review.content}
+          </div>
+          <img
+            class="review__img rounded-[35px] object-cover"
+            src={review.img}
+            width={70}
+            height={100}
+          />
+        </div>
+        <div class="ml-8 mt-4 font-serif text-sm opacity-80">
+          <div class="review__name">{review.name}</div>
+          <div class="review__job">{review.job}</div>
+        </div>
+      </div>
+    </section>
+  );
+});

src/components/review-slide/review.tsx

@@ -2,6 +2,7 @@ import { component$ } from "@builder.io/qwik";
 import type { DocumentHead } from "@builder.io/qwik-city";
 import GhStats from "~/components/gh-stats/gh-stats";
 import Landing from "~/components/landing/landing";
+import ReviewSlide from "~/components/review-slide/review-slide";
 import Skill from "~/components/skill/skill";
 
 export default component$(() => {
@@ -10,6 +11,7 @@ export default component$(() => {
       <Landing />
       <Skill />
       <GhStats />
+      <ReviewSlide />
     </>
   );
 });

src/routes/index.tsx

@@ -13,6 +13,7 @@ export default {
       warning: colors.yellow["300"],
       info: colors.cyan["500"],
       light: colors.gray["50"],
+      gray: colors.gray["500"],
       dark: colors.gray["950"],
     },
     extend: {

tailwind.config.js

@@ -22,5 +22,5 @@
     }
   },
   "files": ["./.eslintrc.cjs"],
-  "include": ["src", "./*.d.ts", "./*.config.ts"]
+  "include": ["src", "./*.d.ts", "./*.config.ts", "./*.config.js"]
 }