diff --git a/app/[locale]/members/page.tsx b/app/[locale]/members/page.tsx
index a281ff8e..b18f00b9 100644
--- a/app/[locale]/members/page.tsx
+++ b/app/[locale]/members/page.tsx
@@ -1,4 +1,4 @@
-'use client'
+'use client';
import { MembersList } from '@/components/Members/MembersLIst/MembersList';
import DiscordLink from '@/components/Common/DiscordLink';
@@ -9,70 +9,79 @@ import { useState } from 'react';
const dummyMembers = [
{
id: 1,
- imgUrl: "http://localhost:3000/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F19125%3Fv%3D4&w=48&q=75",
- name: "יוסף כהן",
- shortDescription: "מפתח אינטרנט",
- longDescription: "מפתח אינטרנט מכור ליצירת ממשקים ידידותיים למשתמש באמצעות React ו-Node.js.",
- joinDate: "2022-01-01"
+ imgUrl: '/images/avatars/avatar.jpg',
+ name: 'יוסף כהן',
+ shortDescription: 'מפתח אינטרנט',
+ longDescription:
+ 'מפתח אינטרנט מכור ליצירת ממשקים ידידותיים למשתמש באמצעות React ו-Node.js.',
+ joinDate: '2022-01-01',
+ isAdmin: true,
},
{
id: 2,
- imgUrl: "http://localhost:3000/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F19125%3Fv%3D4&w=48&q=75",
- name: "שרה לוי",
- shortDescription: "מפתחת אינטרנט",
- longDescription: "מפתחת אינטרנט מכורה ליצירת ממשקים ידידותיים למשתמש באמצעות React ו-Node.js.",
- joinDate: "2022-01-01"
+ imgUrl: '/images/avatars/avatar2.jpg',
+ name: 'שרה לוי',
+ shortDescription: 'מפתחת אינטרנט',
+ longDescription:
+ 'מפתחת אינטרנט מכורה ליצירת ממשקים ידידותיים למשתמש באמצעות React ו-Node.js.',
+ joinDate: '2022-01-01',
+ isAdmin: false,
},
{
id: 3,
- imgUrl: "http://localhost:3000/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F19125%3Fv%3D4&w=48&q=75",
- name: "דניאל כהן",
- shortDescription: "מפתח אינטרנט",
- longDescription: "מפתח אינטרנט מכור ליצירת ממשקים ידידותיים למשתמש באמצעות React ו-Node.js.",
- joinDate: "2022-01-01"
+ imgUrl: '/images/avatars/avatar4.jpg',
+ name: 'דניאל כהן',
+ shortDescription: 'מפתח אינטרנט',
+ longDescription:
+ 'מפתח אינטרנט מכור ליצירת ממשקים ידידותיים למשתמש באמצעות React ו-Node.js.',
+ joinDate: '2022-01-01',
+ isAdmin: false,
},
{
id: 4,
- imgUrl: "http://localhost:3000/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F19125%3Fv%3D4&w=48&q=75",
- name: "רבקה כהן",
- shortDescription: "מפתחת אינטרנט",
- longDescription: "מפתחת אינטרנט מכורה ליצירת ממשקים ידידותיים למשתמש באמצעות React ו-Node.js.",
- joinDate: "2022-01-01"
+ imgUrl: '/images/avatars/avatar8.jpg',
+ name: 'רבקה כהן',
+ shortDescription: 'מפתחת אינטרנט',
+ longDescription:
+ 'מפתחת אינטרנט מכורה ליצירת ממשקים ידידותיים למשתמש באמצעות React ו-Node.js.',
+ joinDate: '2022-01-01',
+ isAdmin: false,
},
{
id: 5,
- imgUrl: "http://localhost:3000/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F19125%3Fv%3D4&w=48&q=75",
- name: "רבקה כהן",
- shortDescription: "מפתחת אינטרנט",
- longDescription: "מפתחת אינטרנט מכורה ליצירת ממשקים ידידותיים למשתמש באמצעות React ו-Node.js.",
- joinDate: "2022-01-01"
+ imgUrl: '/images/avatars/avatar6.jpg',
+ name: 'רבקה כהן',
+ shortDescription: 'מפתחת אינטרנט',
+ longDescription:
+ 'מפתחת אינטרנט מכורה ליצירת ממשקים ידידותיים למשתמש באמצעות React ו-Node.js.',
+ joinDate: '2022-01-01',
+ isAdmin: false,
},
{
id: 6,
- imgUrl: "http://localhost:3000/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F19125%3Fv%3D4&w=48&q=75",
- name: "רבקה כהן",
- shortDescription: "מפתחת אינטרנט",
- longDescription: "מפתחת אינטרנט מכורה ליצירת ממשקים ידידותיים למשתמש באמצעות React ו-Node.js.",
- joinDate: "2022-01-01"
+ imgUrl: '/images/avatars/avatar7.jpg',
+ name: 'רבקה כהן',
+ shortDescription: 'מפתחת אינטרנט',
+ longDescription:
+ 'מפתחת אינטרנט מכורה ליצירת ממשקים ידידותיים למשתמש באמצעות React ו-Node.js.',
+ joinDate: '2022-01-01',
+ isAdmin: false,
},
-];
-
+];
const WelcomeMessage = () => {
return (
-
-
-
+
+
+
כאן אפשר להכיר את כל המשפחה! וכשתסיימו, בואו לדיסקורד
-
-
- ערוץ דיסקורד
-
-
+
+ ערוץ דיסקורד
+
);
@@ -81,19 +90,23 @@ const WelcomeMessage = () => {
const MembersPage: React.FC = () => {
const [searchQuery, setSearchQuery] = useState
('');
- const handleSearchInputChange = (event: React.ChangeEvent) => {
+ const handleSearchInputChange = (
+ event: React.ChangeEvent
+ ) => {
setSearchQuery(event.target.value);
};
- const filteredMembers = dummyMembers.filter(member =>
- member.name.includes(searchQuery) || member.shortDescription.includes(searchQuery)
+ const filteredMembers = dummyMembers.filter(
+ member =>
+ member.name.includes(searchQuery) ||
+ member.shortDescription.includes(searchQuery)
);
return (
-
-
Members
+
+
Members
-
+
);
diff --git a/components/Members/MemberCard/MemberCard.tsx b/components/Members/MemberCard/MemberCard.tsx
index 44cbbb12..3f99eb18 100644
--- a/components/Members/MemberCard/MemberCard.tsx
+++ b/components/Members/MemberCard/MemberCard.tsx
@@ -1,14 +1,7 @@
import React from 'react';
import { MemberCardInfo } from './MemberCardInfo';
import { MemberCardSocialButtons } from './MemberCardSocialButtons';
-
-interface MemberCardProps {
- imgUrl: string;
- name: string;
- shortDescription: string;
- longDescription: string;
- joinDate: string;
-}
+import { MemberCardProps } from '../../../types';
export const MemberCard = ({
imgUrl,
@@ -16,15 +9,17 @@ export const MemberCard = ({
shortDescription,
longDescription,
joinDate,
+ isAdmin,
}: MemberCardProps) => {
return (
-
+
diff --git a/components/Members/MemberCard/MemberCardInfo.tsx b/components/Members/MemberCard/MemberCardInfo.tsx
index e05e3c84..68171c75 100644
--- a/components/Members/MemberCard/MemberCardInfo.tsx
+++ b/components/Members/MemberCard/MemberCardInfo.tsx
@@ -1,12 +1,22 @@
-import React from 'react';
+import React, { SVGProps } from 'react';
import ImageWithFallback from '@/components/utils/ImageWithFallback';
+import { MemberCardProps } from '../../../types';
-interface MemberCardInfoProps {
- imgUrl: string;
- name: string;
- shortDescription: string;
- longDescription: string;
- joinDate: string;
+function Crown(props: SVGProps
) {
+ return (
+
+ );
}
export const MemberCardInfo = ({
@@ -15,27 +25,37 @@ export const MemberCardInfo = ({
shortDescription,
longDescription,
joinDate,
-}: MemberCardInfoProps) => {
+ isAdmin,
+}: MemberCardProps) => {
return (
-
+
-
{name}
-
+
+
{name}
+ {isAdmin && (
+
+ )}
+
+
{shortDescription}
-
{longDescription}
-
{joinDate}
+
+ {longDescription}
+
+
+ {joinDate}
+
);
};
diff --git a/components/Members/MemberCard/MemberCardSocialButtons.tsx b/components/Members/MemberCard/MemberCardSocialButtons.tsx
index 4a884852..d93edf31 100644
--- a/components/Members/MemberCard/MemberCardSocialButtons.tsx
+++ b/components/Members/MemberCard/MemberCardSocialButtons.tsx
@@ -6,7 +6,7 @@ import { GithubMemberLink } from './socialIcons/GithubMemberLink';
export const MemberCardSocialButtons = () => {
return (
-
+
diff --git a/components/Members/MemberCard/socialIcons/TwiterMemberLink.tsx b/components/Members/MemberCard/socialIcons/TwiterMemberLink.tsx
index 57ff0a52..0f704399 100644
--- a/components/Members/MemberCard/socialIcons/TwiterMemberLink.tsx
+++ b/components/Members/MemberCard/socialIcons/TwiterMemberLink.tsx
@@ -23,9 +23,8 @@ export const TwitterMemberLink = ({ twitterUrl }: TwitterMemberLinkProps) => {
>
diff --git a/components/Members/MembersLIst/MembersList.tsx b/components/Members/MembersLIst/MembersList.tsx
index 8ca71ccb..631ce467 100644
--- a/components/Members/MembersLIst/MembersList.tsx
+++ b/components/Members/MembersLIst/MembersList.tsx
@@ -1,21 +1,11 @@
import React from 'react';
import { MemberCard } from '../MemberCard/MemberCard';
-
-interface MembersListProps {
- members: Array<{
- id: number;
- imgUrl: string;
- name: string;
- shortDescription: string;
- longDescription: string;
- joinDate: string;
- }>;
-}
+import { MembersListProps } from '../../../types';
export const MembersList: React.FC
= ({ members }) => {
return (
-
- {members.map((member) => (
+
+ {members.map(member => (
= ({ members }) => {
shortDescription={member.shortDescription}
longDescription={member.longDescription}
joinDate={member.joinDate}
+ isAdmin={member.isAdmin}
/>
))}
diff --git a/components/Members/MembersSearch/MembersSearch.tsx b/components/Members/MembersSearch/MembersSearch.tsx
index c69ab82c..62c62a8f 100644
--- a/components/Members/MembersSearch/MembersSearch.tsx
+++ b/components/Members/MembersSearch/MembersSearch.tsx
@@ -1,14 +1,40 @@
-import React from 'react';
+import React, { SVGProps } from 'react';
interface MembersSearchProps {
onSearchInputChange: (event: React.ChangeEvent
) => void;
}
-export const MembersSearch : React.FC = ({ onSearchInputChange })=> {
+function Magnifier(props: SVGProps) {
return (
-
+
+ );
+}
+
+export const MembersSearch: React.FC
= ({
+ onSearchInputChange,
+}) => {
+ return (
+
);
-}
\ No newline at end of file
+};
diff --git a/components/Projects/FiltersBar/FiltersBar.tsx b/components/Projects/FiltersBar/FiltersBar.tsx
index 57035941..ab1f2696 100644
--- a/components/Projects/FiltersBar/FiltersBar.tsx
+++ b/components/Projects/FiltersBar/FiltersBar.tsx
@@ -89,7 +89,7 @@ const FiltersBar: React.FC = ({
<>
diff --git a/components/utils/ImageWithFallback.tsx b/components/utils/ImageWithFallback.tsx
index 350fee03..c388f74d 100644
--- a/components/utils/ImageWithFallback.tsx
+++ b/components/utils/ImageWithFallback.tsx
@@ -33,7 +33,7 @@ export default function ImageWithFallback({
alt={alt}
onError={handleError}
src={error ? fallback : src}
- className="image-project-card"
+ className="image-project-card rounded-full"
{...props}
/>
);
diff --git a/public/images/avatars/avatar6.jpg b/public/images/avatars/avatar6.jpg
new file mode 100644
index 00000000..fcd6723d
Binary files /dev/null and b/public/images/avatars/avatar6.jpg differ
diff --git a/public/images/avatars/avatar7.jpg b/public/images/avatars/avatar7.jpg
new file mode 100644
index 00000000..b6dd0668
Binary files /dev/null and b/public/images/avatars/avatar7.jpg differ
diff --git a/public/images/avatars/avatar8.jpg b/public/images/avatars/avatar8.jpg
new file mode 100644
index 00000000..bf1dc8c1
Binary files /dev/null and b/public/images/avatars/avatar8.jpg differ
diff --git a/types/index.ts b/types/index.ts
index eaca3015..67f228b7 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -56,3 +56,24 @@ export interface CachedProjects {
items: IRepositoriesAPIResponse;
cacheTimestamp: string;
}
+
+export interface MembersListProps {
+ members: Array<{
+ id: number;
+ imgUrl: string;
+ name: string;
+ shortDescription: string;
+ longDescription: string;
+ joinDate: string;
+ isAdmin: boolean;
+ }>;
+}
+
+export interface MemberCardProps {
+ imgUrl: string;
+ name: string;
+ shortDescription: string;
+ longDescription: string;
+ joinDate: string;
+ isAdmin: boolean;
+}