Merge pull request #9 from frontChapter/tweet-cards

Add Tweet cards

.all-contributorsrc

@@ -40,4 +40,4 @@
       ]
     }
   ]
-}
+}

next.config.ts

@@ -1,7 +1,16 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "avatar.vercel.sh",
+        port: "",
+        pathname: "**",
+      },
+    ],
+  },
 };
 
 export default nextConfig;

src/app/components/TweetSection/Marquee.tsx

@@ -0,0 +1,73 @@
+import { cn } from "@/lib/utils";
+import { ComponentPropsWithoutRef } from "react";
+
+interface MarqueeProps extends ComponentPropsWithoutRef<"div"> {
+  /**
+   * Optional CSS class name to apply custom styles
+   */
+  className?: string;
+  /**
+   * Whether to reverse the animation direction
+   * @default false
+   */
+  reverse?: boolean;
+  /**
+   * Whether to pause the animation on hover
+   * @default false
+   */
+  pauseOnHover?: boolean;
+  /**
+   * Content to be displayed in the marquee
+   */
+  children: React.ReactNode;
+  /**
+   * Whether to animate vertically instead of horizontally
+   * @default false
+   */
+  vertical?: boolean;
+  /**
+   * Number of times to repeat the content
+   * @default 4
+   */
+  repeat?: number;
+}
+
+export function Marquee({
+  className,
+  reverse = false,
+  pauseOnHover = false,
+  children,
+  vertical = false,
+  repeat = 4,
+  ...props
+}: MarqueeProps) {
+  return (
+    <div
+      {...props}
+      className={cn(
+        "group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] [gap:var(--gap)]",
+        {
+          "flex-row": !vertical,
+          "flex-col": vertical,
+        },
+        className,
+      )}
+    >
+      {Array(repeat)
+        .fill(0)
+        .map((_, i) => (
+          <div
+            key={i}
+            className={cn("flex shrink-0 justify-around [gap:var(--gap)]", {
+              "animate-marquee flex-row": !vertical,
+              "animate-marquee-vertical flex-col": vertical,
+              "group-hover:[animation-play-state:paused]": pauseOnHover,
+              "[animation-direction:reverse]": reverse,
+            })}
+          >
+            {children}
+          </div>
+        ))}
+    </div>
+  );
+}

src/app/components/TweetSection/TweetCard.tsx

@@ -0,0 +1,46 @@
+import { cn } from "@/lib/utils";
+import Image from "next/image";
+
+const TweetCard = ({
+  img,
+  name,
+  username,
+  body,
+}: {
+  img: string;
+  name: string;
+  username: string;
+  body: string;
+}) => {
+  return (
+    <figure
+      dir="rtl"
+      className={cn(
+        "relative w-96 cursor-pointer overflow-hidden rounded-xl border p-4",
+        // light styles
+        "border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]",
+        // dark styles
+        "dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]",
+      )}
+    >
+      <div className="flex flex-row items-center gap-2">
+        <Image
+          className="rounded-full"
+          width="32"
+          height="32"
+          alt=""
+          src={img}
+        />
+        <div className="flex flex-col">
+          <figcaption className="text-sm font-medium dark:text-white">
+            {name}
+          </figcaption>
+          <p className="text-xs font-medium dark:text-white/40">{username}</p>
+        </div>
+      </div>
+      <blockquote className="mt-2 text-sm">{body}</blockquote>
+    </figure>
+  );
+};
+
+export default TweetCard;

src/app/components/TweetSection/TweetSection.tsx

@@ -0,0 +1,33 @@
+import { Marquee } from "./Marquee";
+import TweetCard from "./TweetCard";
+import { Section } from "@/components/ui/section";
+import { firstMarqueetweetsData, secondMarqueetweetsData } from "@/configs/tweetsData";
+
+const TweetSection = () => {
+  return (
+    <Section className="md:px-0">
+      <div className="flex flex-col items-center gap-12">
+        <h2 className="text-center text-3xl font-semibold text-foreground dark:text-foreground-dark sm:text-5xl">
+          درمورد <span className="text-orange-500">فرانت چپتر</span> چی
+          می&#8202;گن؟
+        </h2>
+        <div className="relative flex w-full flex-col items-center justify-center overflow-hidden rounded-lg md:shadow-xl">
+          <Marquee reverse pauseOnHover className="[--duration:50s]">
+            {firstMarqueetweetsData.map((review, index) => (
+              <TweetCard key={index} {...review} />
+            ))}
+          </Marquee>
+          <Marquee pauseOnHover className="[--duration:50s]">
+            {secondMarqueetweetsData.map((review, index) => (
+              <TweetCard key={index} {...review} />
+            ))}
+          </Marquee>
+          <div className="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white dark:from-foreground"></div>
+          <div className="pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white dark:from-foreground"></div>
+        </div>
+      </div>
+    </Section>
+  );
+};
+
+export default TweetSection;

src/app/components/TweetSection/tweets.d.ts

@@ -0,0 +1,6 @@
+export type TweetDataType = {
+  name: string;
+  username: string;
+  body: string;
+  img: string;
+};

src/app/page.tsx

@@ -1,9 +1,11 @@
 import Sponsers from "./components/Sponsers/Sponsers";
 import FAQ from "@/app/components/FAQ/FAQ";
+import TweetSection from "@/app/components/TweetSection/TweetSection";
 
 export default function Home() {
   return (
     <>
+      <TweetSection />
       <FAQ />
       <Sponsers />
     </>

src/configs/tweetsData.ts

@@ -0,0 +1,73 @@
+import { TweetDataType } from "@/app/components/TweetSection/tweets";
+
+export const firstMarqueetweetsData: TweetDataType[] = [
+  {
+    name: "صالح شجاعی",
+    username: "@felxxbs",
+    body: "رفقا می‌تونید با رزرو زودتر بلیط اقمتگاهتون، راحت‌تر توی همایش شرکت کنید#frontchapter1402",
+    img: "/images/tweets/profile-picture/saleh-shojaei.png",
+  },
+  {
+    name: "Fabrizio Fernandez",
+    username: "@fab3304",
+    body: "الان رسیدم محل برگزاری همایشحاجی ﺧﻴﻠﯽ ﺧﻔﻨﻪ 😍#frontchapter1402",
+    img: "/images/tweets/profile-picture/Fabrizio-Fernandez.png",
+  },
+  {
+    name: "صالح شجاعی",
+    username: "@felxxbs",
+    body: "رفقا می‌تونید با رزرو زودتر بلیط اقمتگاهتون، راحت‌تر توی همایش شرکت کنید#frontchapter1402",
+    img: "/images/tweets/profile-picture/saleh-shojaei.png",
+  },
+  {
+    name: "Fabrizio Fernandez",
+    username: "@fab3304",
+    body: "الان رسیدم محل برگزاری همایشحاجی ﺧﻴﻠﯽ ﺧﻔﻨﻪ 😍#frontchapter1402",
+    img: "/images/tweets/profile-picture/Fabrizio-Fernandez.png",
+  },
+  {
+    name: "صالح شجاعی",
+    username: "@felxxbs",
+    body: "رفقا می‌تونید با رزرو زودتر بلیط اقمتگاهتون، راحت‌تر توی همایش شرکت کنید#frontchapter1402",
+    img: "/images/tweets/profile-picture/saleh-shojaei.png",
+  },
+  {
+    name: "Fabrizio Fernandez",
+    username: "@fab3304",
+    body: "الان رسیدم محل برگزاری همایشحاجی ﺧﻴﻠﯽ ﺧﻔﻨﻪ 😍#frontchapter1402",
+    img: "/images/tweets/profile-picture/Fabrizio-Fernandez.png",
+  },
+];
+
+export const secondMarqueetweetsData: TweetDataType[] = [
+  {
+    name: "Darius Flynn",
+    username: "@flynnn",
+    body: "رفقا می‌تونید با رزرو زودتر بلیط اقمتگاهتون، راحت‌تر توی همایش شرکت کنید#frontchapter1402",
+    img: "/images/tweets/profile-picture/Darius-Flynn.jpg",
+  },
+  {
+    name: "Darius Flynn",
+    username: "@flynnn",
+    body: "رفقا می‌تونید با رزرو زودتر بلیط اقمتگاهتون، راحت‌تر توی همایش شرکت کنید#frontchapter1402",
+    img: "/images/tweets/profile-picture/Darius-Flynn.jpg",
+  },
+  {
+    name: "Darius Flynn",
+    username: "@flynnn",
+    body: "رفقا می‌تونید با رزرو زودتر بلیط اقمتگاهتون، راحت‌تر توی همایش شرکت کنید#frontchapter1402",
+    img: "/images/tweets/profile-picture/Darius-Flynn.jpg",
+  },
+  {
+    name: "Darius Flynn",
+    username: "@flynnn",
+    body: "رفقا می‌تونید با رزرو زودتر بلیط اقمتگاهتون، راحت‌تر توی همایش شرکت کنید#frontchapter1402",
+    img: "/images/tweets/profile-picture/Darius-Flynn.jpg",
+  },
+  {
+    name: "Darius Flynn",
+    username: "@flynnn",
+    body: "رفقا می‌تونید با رزرو زودتر بلیط اقمتگاهتون، راحت‌تر توی همایش شرکت کنید#frontchapter1402",
+    img: "/images/tweets/profile-picture/Darius-Flynn.jpg",
+  },
+];

tailwind.config.ts

@@ -1,4 +1,5 @@
 import type { Config } from "tailwindcss";
+import twAnimate from "tailwindcss-animate";
 
 export default {
   darkMode: ["class"],
@@ -220,6 +221,20 @@ export default {
         "dark-glow-lg": "0 0 64px 0 hsl(0 0% 98% / 0.06) inset",
       },
     },
+    animation: {
+      marquee: "marquee var(--duration) linear infinite",
+      "marquee-vertical": "marquee-vertical var(--duration) linear infinite",
+    },
+    keyframes: {
+      marquee: {
+        from: { transform: "translateX(0)" },
+        to: { transform: "translateX(calc(-100% - var(--gap)))" },
+      },
+      "marquee-vertical": {
+        from: { transform: "translateY(0)" },
+        to: { transform: "translateY(calc(-100% - var(--gap)))" },
+      },
+    },
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [twAnimate],
 } satisfies Config;