From 5b61d1af0c8b05c427218a7bf5314127cf69db00 Mon Sep 17 00:00:00 2001 From: dofxo Date: Mon, 27 Jan 2025 18:05:01 +0330 Subject: [PATCH 1/5] feat: add speakers section's wrapper with its title in this commit i've added speaker section wrapper with its styles along with the title of it. as mentioned in the code, hard coded sizes will be replaced with tailwind custom configs (color, spacings at etc.) --- src/app/page.tsx | 100 +----------------- src/components/sections/speakers/Speakers.tsx | 16 +++ 2 files changed, 20 insertions(+), 96 deletions(-) create mode 100644 src/components/sections/speakers/Speakers.tsx diff --git a/src/app/page.tsx b/src/app/page.tsx index 3eee014..44946ed 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,101 +1,9 @@ -import Image from "next/image"; +import Speakers from "@/components/sections/speakers/Speakers"; export default function Home() { return ( -
-
- Next.js logo -
    -
  1. - Get started by editing{" "} - - src/app/page.tsx - - . -
    2. -
  2. Save and see your changes instantly.
    3. -
- -
- - Vercel logomark - Deploy now - - - Read our docs - -
-
- -
+ <> + + ); } diff --git a/src/components/sections/speakers/Speakers.tsx b/src/components/sections/speakers/Speakers.tsx new file mode 100644 index 0000000..d6cd4d7 --- /dev/null +++ b/src/components/sections/speakers/Speakers.tsx @@ -0,0 +1,16 @@ +const Speakers = () => { + { + /* TODO: replace hard coded sizes with global props */ + } + + return ( +
+

سخنرانان همایش

+
+ ); +}; + +export default Speakers; From 48e8a1398e9e44034928195dbd4b6787c0934357 Mon Sep 17 00:00:00 2001 From: dofxo Date: Mon, 27 Jan 2025 19:42:09 +0330 Subject: [PATCH 2/5] feat: add speakers data in this commit i've added speakers data (not real data) to be able to use them for the speakers sections all the datas will be removed/replaced with the actual speakers data --- src/components/sections/types.ts | 9 ++++ src/data/speakers.ts | 86 ++++++++++++++++++++++++++++++++ 2 files changed, 95 insertions(+) create mode 100644 src/components/sections/types.ts create mode 100644 src/data/speakers.ts diff --git a/src/components/sections/types.ts b/src/components/sections/types.ts new file mode 100644 index 0000000..f79aee7 --- /dev/null +++ b/src/components/sections/types.ts @@ -0,0 +1,9 @@ +export interface speakerInfoType { + imageUrl: string; + role: string; + name: string; + company: { + logo: string; + name: string; + }; +} diff --git a/src/data/speakers.ts b/src/data/speakers.ts new file mode 100644 index 0000000..a27d59b --- /dev/null +++ b/src/data/speakers.ts @@ -0,0 +1,86 @@ +import { speakerInfoType } from "@/components/sections/types"; + +export const speakersData: speakerInfoType[] = [ + // all data will be replaced/removed with actual data + { + name: "پوریا باباعلی", + role: "توسعده دهنده فرانت اند", + imageUrl: "/images/speakers/profile-picture/pooria-baba-ali.svg", + company: { + name: "رسمیو", + logo: "/images/speakers/company-logo/rasmio.svg", + }, + }, + { + name: "پوریا باباعلی", + role: "توسعده دهنده فرانت اند", + imageUrl: "/images/speakers/profile-picture/pooria-baba-ali.svg", + company: { + name: "رسمیو", + logo: "/images/speakers/company-logo/rasmio.svg", + }, + }, + { + name: "پوریا باباعلی", + role: "توسعده دهنده فرانت اند", + imageUrl: "/images/speakers/profile-picture/pooria-baba-ali.svg", + company: { + name: "رسمیو", + logo: "/images/speakers/company-logo/rasmio.svg", + }, + }, + { + name: "پوریا باباعلی", + role: "توسعده دهنده فرانت اند", + imageUrl: "/images/speakers/profile-picture/pooria-baba-ali.svg", + company: { + name: "رسمیو", + logo: "/images/speakers/company-logo/rasmio.svg", + }, + }, + { + name: "پوریا باباعلی", + role: "توسعده دهنده فرانت اند", + imageUrl: "/images/speakers/profile-picture/pooria-baba-ali.svg", + company: { + name: "رسمیو", + logo: "/images/speakers/company-logo/rasmio.svg", + }, + }, + { + name: "پوریا باباعلی", + role: "توسعده دهنده فرانت اند", + imageUrl: "/images/speakers/profile-picture/pooria-baba-ali.svg", + company: { + name: "رسمیو", + logo: "/images/speakers/company-logo/rasmio.svg", + }, + }, + { + name: "پوریا باباعلی", + role: "توسعده دهنده فرانت اند", + imageUrl: "/images/speakers/profile-picture/pooria-baba-ali.svg", + company: { + name: "رسمیو", + logo: "/images/speakers/company-logo/rasmio.svg", + }, + }, + { + name: "پوریا باباعلی", + role: "توسعده دهنده فرانت اند", + imageUrl: "/images/speakers/profile-picture/pooria-baba-ali.svg", + company: { + name: "رسمیو", + logo: "/images/speakers/company-logo/rasmio.svg", + }, + }, + { + name: "پوریا باباعلی", + role: "توسعده دهنده فرانت اند", + imageUrl: "/images/speakers/profile-picture/pooria-baba-ali.svg", + company: { + name: "رسمیو", + logo: "/images/speakers/company-logo/rasmio.svg", + }, + }, +]; From d081ff4c0ea549e2fc6cc2bd6ce8a416d013f9e5 Mon Sep 17 00:00:00 2001 From: dofxo Date: Mon, 27 Jan 2025 19:43:11 +0330 Subject: [PATCH 3/5] feat: add sample company-logo and profile-picture for the speaker section these images are sample images for the speakers and will be repalced with actual data --- public/images/speakers/company-logo/rasmio.svg | 9 +++++++++ .../images/speakers/profile-picture/pooria-baba-ali.svg | 9 +++++++++ 2 files changed, 18 insertions(+) create mode 100644 public/images/speakers/company-logo/rasmio.svg create mode 100644 public/images/speakers/profile-picture/pooria-baba-ali.svg diff --git a/public/images/speakers/company-logo/rasmio.svg b/public/images/speakers/company-logo/rasmio.svg new file mode 100644 index 0000000..5c67650 --- /dev/null +++ b/public/images/speakers/company-logo/rasmio.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/images/speakers/profile-picture/pooria-baba-ali.svg b/public/images/speakers/profile-picture/pooria-baba-ali.svg new file mode 100644 index 0000000..d9a1ee8 --- /dev/null +++ b/public/images/speakers/profile-picture/pooria-baba-ali.svg @@ -0,0 +1,9 @@ + + + + + + + + + From 225bff429896d7a16e2cf9b8de5b98315dd44a66 Mon Sep 17 00:00:00 2001 From: dofxo Date: Mon, 27 Jan 2025 19:45:20 +0330 Subject: [PATCH 4/5] feat: add speaker component note: the current output of the card needs a rtl direction so the output will become just like the design (it currently doesnt have the direction as it is something to be placed in the layout) --- src/components/sections/speakers/Speaker.tsx | 59 ++++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 src/components/sections/speakers/Speaker.tsx diff --git a/src/components/sections/speakers/Speaker.tsx b/src/components/sections/speakers/Speaker.tsx new file mode 100644 index 0000000..b930fb3 --- /dev/null +++ b/src/components/sections/speakers/Speaker.tsx @@ -0,0 +1,59 @@ +import { speakerInfoType } from "../types"; +import Image from "next/image"; + +const Speaker = ({ speakerInfo }: { speakerInfo: speakerInfoType }) => { + { + /* TODO: replace hard coded styles with global props */ + } + + const { name, role, company, imageUrl } = speakerInfo; + return ( +
+ {/* speaker picture */} +
+ {/* Gradient */} +
+ {/* Black Background */} +
+ + {name} +
+ {/* info section*/} +
+ {/* speaker name*/} + {name} + {/* speaker role (stack)*/} + {role} + {/* speaker company details */} +
+ در +
+ {company.name} + {company.name} +
+
+
+
+ ); +}; + +export default Speaker; From 325f0394f6893855f036b8338cc47123d6a8568a Mon Sep 17 00:00:00 2001 From: dofxo Date: Mon, 27 Jan 2025 19:46:28 +0330 Subject: [PATCH 5/5] modify: render speakers using speakers data --- src/components/sections/speakers/Speakers.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/sections/speakers/Speakers.tsx b/src/components/sections/speakers/Speakers.tsx index d6cd4d7..fbb9171 100644 --- a/src/components/sections/speakers/Speakers.tsx +++ b/src/components/sections/speakers/Speakers.tsx @@ -1,3 +1,6 @@ +import Speaker from "./Speaker"; +import { speakersData } from "@/data/speakers"; + const Speakers = () => { { /* TODO: replace hard coded sizes with global props */ @@ -6,9 +9,14 @@ const Speakers = () => { return (

سخنرانان همایش

+
+ {speakersData.map((info, idx) => ( + + ))} +
); };