Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Tweet cards #9

Merged
merged 62 commits into from
Feb 14, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
62 commits
Select commit Hold shift + click to select a range
88d03d8
build: add packageManager to package.json
AmirHosseinKarimi Jan 27, 2025
7bf8832
Merge pull request #1 from frontChapter/test
AmirHosseinKarimi Jan 27, 2025
5ae4835
feat: Add tweet marquee component
Bravemobin Jan 28, 2025
10ea555
feat: Add heading to tweet section
Bravemobin Jan 28, 2025
dd1da56
feat: Add tweetsData file for dynamic tweets
Bravemobin Jan 28, 2025
74fc53e
feat: Add image optimization for avatars
Bravemobin Jan 28, 2025
1f6fcc5
refactor: change all faq related files and paths naming conventions
fulcain Jan 31, 2025
387cef2
refactor: change the imported data filename into the FAQ component
fulcain Jan 31, 2025
e8844a7
refactor: move the FAQ section under app/components
fulcain Jan 31, 2025
7ecaa0b
build: run pnpm install
fulcain Jan 31, 2025
b0f53f4
feat: Add FaqDataType to the faqData array
fulcain Jan 31, 2025
67954fe
refactor: change the faq data type naming to match other files and fo…
fulcain Jan 31, 2025
0555f92
fix: Correct import path for TweetSection component
Bravemobin Feb 1, 2025
c84c7a5
feat: add dana font to project
fulcain Feb 2, 2025
db4f044
feat: add danaVF font to html using localFont method
fulcain Feb 2, 2025
4fcecb1
feat: add background and color to body
fulcain Feb 2, 2025
371bdcc
feat: add font callback for danaVF
fulcain Feb 2, 2025
275c660
refactor: change favicon
fulcain Feb 6, 2025
8b370bb
refactor: change app title
fulcain Feb 6, 2025
4e746ef
refactor: change the faq question data
fulcain Feb 6, 2025
24a019d
feat: add background color to body
fulcain Feb 6, 2025
3b8ad85
style: refactor the file
fulcain Feb 7, 2025
cb1183b
feat: add 12 spacing according to UI
fulcain Feb 7, 2025
7223210
refactor: change the gap of FAQ section from gap-8 to gap-12
fulcain Feb 7, 2025
183465b
feat: add 20 and 24 spacing to tailwind config
fulcain Feb 7, 2025
1f65bc7
feat: add 8 spacing to tailwind
fulcain Feb 7, 2025
fb27989
refactor: change the section component spacing to match design
fulcain Feb 7, 2025
7a06f6d
refactor: change the spacing for mobile and desktop for section compo…
fulcain Feb 7, 2025
bd150b1
refactor: change some faq component styles
fulcain Feb 9, 2025
cb90bd1
refactor: change localFont method with direct use of font face
fulcain Feb 9, 2025
e7f424d
refactor: change the way font was implemented to localFonts
fulcain Feb 9, 2025
4c7c97f
refactor: remove the styles related to body applied in css
fulcain Feb 9, 2025
29b97ed
refactor: move the type file related to faq next to FAQ component
fulcain Feb 9, 2025
d2e1878
refactor: change the import paths to use alias path
fulcain Feb 9, 2025
f415adb
refactor: remove the id prop from faq data and use index instead
fulcain Feb 9, 2025
20ee2bf
fix: change .variable to .className for localFont
fulcain Feb 9, 2025
dc3cc06
refactor: remove utility classes in global css
fulcain Feb 9, 2025
9f7d1bd
refactor: remove all css variables and apply them directly in tailwind
fulcain Feb 10, 2025
37d7030
feat: add dark styles for components
fulcain Feb 10, 2025
cdd76ab
refactor: remove id prop from faq data file
fulcain Feb 10, 2025
dc5d40f
style: change width of tweet component
Bravemobin Feb 10, 2025
a576115
refactor: dark mode and user infos
Bravemobin Feb 10, 2025
14dd549
feat: update FAQ section data
AmirHosseinKarimi Feb 10, 2025
98f7eab
build: add commit-and-tag-version package
AmirHosseinKarimi Feb 10, 2025
383bc81
ci: add pump command to pump package version
AmirHosseinKarimi Feb 10, 2025
6b7ccb7
chore(release): 0.2.0
AmirHosseinKarimi Feb 10, 2025
71b806a
Merge pull request #7 from frontChapter/faq
AmirHosseinKarimi Feb 10, 2025
b56f420
ci: run changelog workflow only for new pull-requests
AmirHosseinKarimi Feb 10, 2025
6f9b4fc
ci: setup all-contributor bot
AmirHosseinKarimi Feb 10, 2025
7d9784c
chore(release): 0.2.1
AmirHosseinKarimi Feb 10, 2025
a6a3b54
docs: update README.md
allcontributors[bot] Feb 10, 2025
14db18c
docs: update .all-contributorsrc
allcontributors[bot] Feb 10, 2025
4539df0
Merge pull request #15 from frontChapter/all-contributors/add-AmirHos…
AmirHosseinKarimi Feb 10, 2025
c5991c3
docs: update README.md
allcontributors[bot] Feb 10, 2025
5738df2
docs: update README.md
allcontributors[bot] Feb 10, 2025
8e77672
docs: update .all-contributorsrc
allcontributors[bot] Feb 10, 2025
3e6aede
Merge pull request #16 from frontChapter/all-contributors/add-fulcain
AmirHosseinKarimi Feb 10, 2025
f2f55f7
Merge branch 'dev' of https://github.com/frontChapter/NextJS into twe…
Bravemobin Feb 11, 2025
d339583
refactor: Move Marquee and TweetCard components
Bravemobin Feb 11, 2025
50ae9b2
chore: remove bun.lockb file
Bravemobin Feb 12, 2025
d09efd7
Merge branch 'dev' into tweet-cards
AmirHosseinKarimi Feb 14, 2025
81bf543
fix: revert accidentally removed code
AmirHosseinKarimi Feb 14, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .all-contributorsrc
Original file line number Diff line number Diff line change
Expand Up @@ -40,4 +40,4 @@
]
}
]
}
}
11 changes: 10 additions & 1 deletion next.config.ts
Original file line number Diff line number Diff line change
@@ -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;
489 changes: 241 additions & 248 deletions pnpm-lock.yaml

Large diffs are not rendered by default.

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
73 changes: 73 additions & 0 deletions src/app/components/TweetSection/Marquee.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
46 changes: 46 additions & 0 deletions src/app/components/TweetSection/TweetCard.tsx
Original file line number Diff line number Diff line change
@@ -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;
33 changes: 33 additions & 0 deletions src/app/components/TweetSection/TweetSection.tsx
Original file line number Diff line number Diff line change
@@ -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;
6 changes: 6 additions & 0 deletions src/app/components/TweetSection/tweets.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export type TweetDataType = {
name: string;
username: string;
body: string;
img: string;
};
2 changes: 2 additions & 0 deletions src/app/page.tsx
Original file line number Diff line number Diff line change
@@ -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 />
</>
Expand Down
73 changes: 73 additions & 0 deletions src/configs/tweetsData.ts
Original file line number Diff line number Diff line change
@@ -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",
},
];
17 changes: 16 additions & 1 deletion tailwind.config.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import type { Config } from "tailwindcss";
import twAnimate from "tailwindcss-animate";

export default {
darkMode: ["class"],
Expand Down Expand Up @@ -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;
Loading