diff --git a/public/locales/de/translations.json b/public/locales/de/translations.json index 22136abf..00afde9c 100644 --- a/public/locales/de/translations.json +++ b/public/locales/de/translations.json @@ -399,6 +399,12 @@ } }, "home": { + "content": { + "header": "Dashboard Startseite", + "newOpportunities": "Neueste Möglichkeiten", + "newVolunteers": "Neueste Freiwillige", + "loading": "Wird geladen..." + }, "sidebar": { "home": "Startseite", "volunteers": "Freiwillige", diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json index fed0d78f..95509e2e 100644 --- a/public/locales/en/translations.json +++ b/public/locales/en/translations.json @@ -399,6 +399,12 @@ } }, "home": { + "content": { + "header": "Dashboard Home", + "newOpportunities": "Newest Opportunities", + "newVolunteers": "Newest Volunteers", + "loading": "Loading..." + }, "sidebar": { "home": "Home", "volunteers": "Volunteers", diff --git a/src/app/[lang]/globals.css b/src/app/[lang]/globals.css index 501ea213..1ec48c5b 100644 --- a/src/app/[lang]/globals.css +++ b/src/app/[lang]/globals.css @@ -1305,6 +1305,7 @@ html { --dashboard-home-container-padding: 40px 120px 100px 132px; --dashboard-home-container-gap: 20px; + --dashboard-home-container-min-height: 300px; --search-container-height: 64px; --search-container-border-radius: 160px; diff --git a/src/components/Dashboard/Home/Home.tsx b/src/components/Dashboard/Home/Home.tsx index 48ce7c79..4b92eb91 100644 --- a/src/components/Dashboard/Home/Home.tsx +++ b/src/components/Dashboard/Home/Home.tsx @@ -1,15 +1,8 @@ "use client"; -import styled from "styled-components"; import DashboardHomeContent from "./HomeContent"; import { DashboardLayout } from "@/components/Layout"; - -const HomeContainer = styled.div` - display: flex; - flex-direction: row; - padding: var(--dashboard-home-container-padding); - gap: var(--dashboard-home-container-gap); -`; +import { HomeContainer } from "./styles"; export function DashboardHome() { return ( diff --git a/src/components/Dashboard/Home/HomeContent.tsx b/src/components/Dashboard/Home/HomeContent.tsx index 115b8880..8ecc381b 100644 --- a/src/components/Dashboard/Home/HomeContent.tsx +++ b/src/components/Dashboard/Home/HomeContent.tsx @@ -1,16 +1,23 @@ -import { Heading2 } from "@/components/styled/text"; +import { Heading2, Heading3 } from "@/components/styled/text"; import React from "react"; -import styled from "styled-components"; - -const DashboardContentContainer = styled.div` - display: flex; - height: 300px; -`; +import { NewestOpportunities } from "./NewestOpportunities"; +import { NewestVolunteers } from "./NewestVolunteers"; +import { DashboardCardContainer, DashboardContentContainer } from "./styles"; +import { useTranslation } from "react-i18next"; export default function DashboardHomeContent() { + const { t } = useTranslation(); return ( - Dashboard Content... + {t("dashboard.home.content.header")} + {t("dashboard.home.content.newOpportunities")} + + + + {t("dashboard.home.content.newVolunteers")} + + + ); } diff --git a/src/components/Dashboard/Home/NewestOpportunities.tsx b/src/components/Dashboard/Home/NewestOpportunities.tsx new file mode 100644 index 00000000..dbf62457 --- /dev/null +++ b/src/components/Dashboard/Home/NewestOpportunities.tsx @@ -0,0 +1,31 @@ +import { apiPathOpportunity, apiPathOption, cacheTTL } from "@/config/constants"; +import { useGetQuery } from "@/hooks"; +import { ApiOptionLists, ApiVolunteerOpportunityGetList, OpportunityStatusType, SortOrder } from "need4deed-sdk"; +import { OpportunityCard } from "../Opportunities/OpportunityCard"; +import { useTranslation } from "react-i18next"; +import { Heading4 } from "@/components/styled/text"; + +export function NewestOpportunities() { + const { t } = useTranslation(); + const { data: apiFilterOptions } = useGetQuery({ queryKey: ["options"], apiPath: apiPathOption }); + const { data: opportunities, isLoading } = useGetQuery({ + queryKey: ["opportunities", "newest"], + apiPath: `${apiPathOpportunity}/`, + params: { + limit: 2, + page: 1, + sortOrder: SortOrder.NewToOld, + filter: { status: OpportunityStatusType.NEW }, + }, + staleTime: cacheTTL, + }); + const activitiesList = apiFilterOptions?.activity; + + if (isLoading) { + return {t("dashboard.home.content.loading")}; + } + + return opportunities?.map((opp) => ( + + )); +} diff --git a/src/components/Dashboard/Home/NewestVolunteers.tsx b/src/components/Dashboard/Home/NewestVolunteers.tsx new file mode 100644 index 00000000..5674a990 --- /dev/null +++ b/src/components/Dashboard/Home/NewestVolunteers.tsx @@ -0,0 +1,27 @@ +import { apiPathVolunteer, cacheTTL } from "@/config/constants"; +import { useGetQuery } from "@/hooks"; +import { ApiVolunteerGetList, SortOrder, VolunteerStateEngagementType } from "need4deed-sdk"; +import VolunteerCard from "../Volunteers/VolunteerCard"; +import { Heading4 } from "@/components/styled/text"; +import { useTranslation } from "react-i18next"; + +export function NewestVolunteers() { + const { t } = useTranslation(); + const { data: volunteers, isLoading } = useGetQuery({ + queryKey: ["volunteers", "newest"], + apiPath: `${apiPathVolunteer}/`, + params: { + limit: 2, + page: 1, + sortOrder: SortOrder.NewToOld, + filter: { status: VolunteerStateEngagementType.NEW }, + }, + staleTime: cacheTTL, + }); + + if (isLoading) { + return {t("dashboard.home.content.loading")}; + } + + return volunteers?.map((vol) => ); +} diff --git a/src/components/Dashboard/Home/styles.ts b/src/components/Dashboard/Home/styles.ts new file mode 100644 index 00000000..8a2fb268 --- /dev/null +++ b/src/components/Dashboard/Home/styles.ts @@ -0,0 +1,20 @@ +import styled from "styled-components"; + +export const HomeContainer = styled.div` + display: flex; + flex-direction: row; + padding: var(--dashboard-home-container-padding); + gap: var(--dashboard-home-container-gap); +`; + +export const DashboardContentContainer = styled.div` + display: flex; + flex-direction: column; + gap: var(--dashboard-home-container-gap); + min-height: var(--dashboard-home-container-min-height); +`; + +export const DashboardCardContainer = styled.div` + display: flex; + gap: var(--dashboard-home-container-gap); +`;