feature/BQ-282 into [email protected] 🐢 activity card page

app/(landing)/(components)/ActivitiesSection/ActivitiesSection.tsx

@@ -48,7 +48,7 @@ export const ActivitiesSection = async ({ cityId }: ActivitiesSectionProps) => {
         <Typography tag='h2' variant='h1' className='text-[21px] lg:text-4xl'>
           <I18nText path='landing.activities.title' />
         </Typography>
-        <Link href={ROUTES.APP.ACTIVITIES} className={buttonVariants({ variant: 'link' })}>
+        <Link href={ROUTES.APP.ACTIVITIES.ROOT} className={buttonVariants({ variant: 'link' })}>
           <Typography tag='p' variant='body1' className='py-0 xxsx:text-base'>
             <I18nText path='button.watchAll' />
           </Typography>

app/app/(main)/(constants)/participantLinks.tsx

@@ -5,7 +5,7 @@ export const PARTICIPANT_LINKS = [
   {
     icon: <ActivitiesIcon />,
     text: 'navigation.link.app.activities',
-    href: ROUTES.APP.ACTIVITIES
+    href: ROUTES.APP.ACTIVITIES.ROOT
   },
   {
     icon: <RatingIcon />,

app/app/(main)/activities/(components)/ActivitiesBreadcrumbs/ActivitiesBreadcrumbs.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { useI18n } from '@/utils/contexts';
+
+import { ActivitiesBreadcrumbsItem } from '../ActivitiesBreadcrumbsItem/ActivitiesBreadcrumbsItem';
+
+export const ActivitiesBreadcrumbs = () => {
+  const i18n = useI18n();
+
+  return (
+    <ActivitiesBreadcrumbsItem
+      ids={{
+        app: { hidden: true },
+        activities: {
+          value: i18n.formatMessage({ id: 'navigation.link.app.activities' }),
+          clickable: true
+        },
+        id: { value: i18n.formatMessage({ id: 'navigation.link.app.activities.card' }) },
+        schedule: { hidden: true },
+        addressId: {
+          value: i18n.formatMessage({ id: 'navigation.link.app.activities.schedule' }),
+          clickable: false
+        }
+      }}
+    />
+  );
+};

app/app/(main)/activities/(components)/ActivitiesBreadcrumbsItem/ActivitiesBreadcrumbsItem.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { useParams, usePathname } from 'next/navigation';
+
+import { I18nText } from '@/components/common';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+} from '@/components/ui';
+
+interface ActivitiesBreadcrumbsItemProps extends React.ComponentProps<typeof Breadcrumb> {
+  ids?: Record<string, { value?: string; clickable?: boolean; href?: string; hidden?: boolean }>;
+}
+
+export const ActivitiesBreadcrumbsItem = ({
+  ids = {},
+  ...props
+}: ActivitiesBreadcrumbsItemProps) => {
+  const params = useParams();
+  const pathname = usePathname();
+
+  const paramValues = Object.values(params);
+  const pathnames = pathname.split('/').filter((path) => path);
+
+  const preparedPathnames = pathnames.map((path, index) => {
+    const href = `/${pathnames.slice(0, index + 1).join('/')}`;
+    const idParam = Object.entries(params).find((param) => param[1] === path);
+
+    const pathname = idParam ? idParam[0] : path;
+
+    if (ids[pathname]?.hidden) return null;
+    return { pathname, href, ...ids[pathname] };
+  });
+
+  const filteredPathnames = preparedPathnames.filter(Boolean) as {
+    pathname: string;
+    href: string;
+  }[];
+
+  return (
+    <Breadcrumb className='pb-4' {...props}>
+      <BreadcrumbList>
+        {filteredPathnames.map(({ pathname, href }, index) => {
+          const hrefWithoutIds = pathnames
+            .slice(0, index + 1)
+            .filter(
+              (currentPath) =>
+                !~paramValues.findIndex((currentParam) => currentParam === currentPath)
+            );
+          const translateHref = `.${hrefWithoutIds.join('.')}`;
+
+          const id = ids[pathname];
+          const clickable = (id?.clickable && id?.href) ?? true;
+
+          const item = (
+            <>
+              {id?.value && id.value}
+              {!id?.value && (
+                <I18nText path={`navigation.link${translateHref}` as LocaleMessageId} />
+              )}
+            </>
+          );
+
+          return (
+            <>
+              <BreadcrumbItem key={href} className='list-none text-base'>
+                {clickable && <BreadcrumbLink href={href}>{item}</BreadcrumbLink>}
+                {!clickable && <BreadcrumbPage>{item}</BreadcrumbPage>}
+              </BreadcrumbItem>
+              {index !== filteredPathnames.length - 1 && <BreadcrumbSeparator />}
+            </>
+          );
+        })}
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+};

app/app/(main)/activities/(components)/ActivitiesCategories/ActivitiesCategories.tsx

@@ -13,7 +13,7 @@ export const ActivitiesCategories = () => {
   const { categories, onCategoryClick } = useActivitiesPage();
 
   return (
-    <ScrollArea className='w-full space-y-3 whitespace-nowrap'>
+    <ScrollArea className='space-y-3 whitespace-nowrap'>
       <Tabs defaultValue={searchParams.get('category') ?? ''}>
         <TabsList className='flex w-full justify-start gap-1 bg-transparent p-0'>
           <TabsTrigger
@@ -24,16 +24,17 @@ export const ActivitiesCategories = () => {
             <I18nText path='organization.activities.category.all' />
           </TabsTrigger>
 
-          {categories.map((category) => (
-            <TabsTrigger
-              key={category.id}
-              value={category.data.RU}
-              className='gap-10 rounded-full data-[state=active]:bg-taiga data-[state=active]:text-white'
-              onClick={() => onCategoryClick(category.data.RU)}
-            >
-              {category.data.RU}
-            </TabsTrigger>
-          ))}
+          {categories &&
+            categories.map((category) => (
+              <TabsTrigger
+                key={category.id}
+                value={category.data.RU}
+                className='gap-10 rounded-full data-[state=active]:bg-taiga data-[state=active]:text-white'
+                onClick={() => onCategoryClick(category.data.RU)}
+              >
+                {category.data.RU}
+              </TabsTrigger>
+            ))}
         </TabsList>
       </Tabs>
       <ScrollBar orientation='horizontal' />

app/app/(main)/activities/(components)/ActivityList/ActivityList.tsx

@@ -2,6 +2,7 @@
 
 import React from 'react';
 import { Clock4Icon, UserRoundIcon } from 'lucide-react';
+import Link from 'next/link';
 import { useIntersectionObserver } from 'usehooks-ts';
 
 import { I18nText } from '@/components/common';
@@ -13,8 +14,10 @@ import {
   ActivityCardDivider,
   ActivityCardHeader,
   ActivityCardImage,
-  ActivityCardName
+  ActivityCardName,
+  Typography
 } from '@/components/ui';
+import { ROUTES } from '@/utils/constants';
 
 import { useActivitiesPage } from '../../(contexts)/activitiesPage';
 
@@ -36,30 +39,44 @@ export const ActivityList = () => {
           const activityCover = activity.media.find((item) => item.flag === 'AVATAR')!;
 
           return (
-            <ActivityCard key={activity.id}>
-              <ActivityCardImage src={activityCover.url} alt={activity.name} />
-              <ActivityCardHeader>
-                <ActivityCardCategory>{activity.category.RU}</ActivityCardCategory>
-                <ActivityCardName>{activity.name}</ActivityCardName>
-              </ActivityCardHeader>
-              <ActivityCardDivider />
-              <ActivityCardContent>
-                <ActivityCardContentItem>
-                  <UserRoundIcon className='size-6 stroke-muted-foreground' />
-                  <I18nText
-                    path='landing.activities.card.minimumAge'
-                    values={{ age: activity.ageLimit[0] }}
-                  />
-                </ActivityCardContentItem>
-                <ActivityCardContentItem>
-                  <Clock4Icon className='size-6 stroke-muted-foreground' />
-                  <I18nText
-                    path='landing.activities.card.duration'
-                    values={{ duration: activity.duration }}
-                  />
-                </ActivityCardContentItem>
-              </ActivityCardContent>
-            </ActivityCard>
+            <Link href={`${ROUTES.APP.ACTIVITIES.ID(activity.id)}`}>
+              <ActivityCard key={activity.id}>
+                <ActivityCardImage src={activityCover.url} alt={activity.name} />
+                <ActivityCardHeader>
+                  <ActivityCardCategory>{activity.category.RU}</ActivityCardCategory>
+                  <ActivityCardName>{activity.name}</ActivityCardName>
+                </ActivityCardHeader>
+                <ActivityCardDivider />
+                <ActivityCardContent>
+                  <ActivityCardContentItem>
+                    <UserRoundIcon className='size-3 stroke-muted-foreground 2xs:size-5' />
+                    <Typography
+                      tag='p'
+                      variant='body4'
+                      className='text-muted-foreground 2xs:text-base'
+                    >
+                      <I18nText
+                        path='landing.activities.card.minimumAge'
+                        values={{ age: activity.ageLimit[0] }}
+                      />
+                    </Typography>
+                  </ActivityCardContentItem>
+                  <ActivityCardContentItem>
+                    <Clock4Icon className='size-3 stroke-muted-foreground 2xs:size-5' />
+                    <Typography
+                      tag='p'
+                      variant='body4'
+                      className='text-muted-foreground 2xs:text-base'
+                    >
+                      <I18nText
+                        path='landing.activities.card.duration'
+                        values={{ duration: activity.duration }}
+                      />
+                    </Typography>
+                  </ActivityCardContentItem>
+                </ActivityCardContent>
+              </ActivityCard>
+            </Link>
           );
         })}
       </div>

app/app/(main)/activities/[id]/(components)/ActivityInfoCard/ActivityInfoCard.tsx

@@ -0,0 +1,71 @@
+import { Clock4Icon, UserRoundIcon } from 'lucide-react';
+
+import type { ActivityResponse } from '@/api-types';
+import { I18nText } from '@/components/common';
+import {
+  ActivityCard,
+  ActivityCardCategory,
+  ActivityCardContent,
+  ActivityCardContentItem,
+  ActivityCardDivider,
+  ActivityCardHeader,
+  ActivityCardHeaderTop,
+  ActivityCardName,
+  Typography
+} from '@/components/ui';
+
+export const ActivityInfoCard = ({ activity }: { activity: ActivityResponse }) => (
+  <ActivityCard className='mt-3 max-w-[483px]'>
+    <ActivityCardHeader className='lg:gap-2'>
+      <ActivityCardHeaderTop className='mb-0 mt-0'>
+        <ActivityCardCategory>{activity.category.RU}</ActivityCardCategory>
+        {/* <div className='flex gap-2 lg:gap-4'>
+                {activity.participants && (
+                  <ActivityCardContentItem>
+                    <UsersRoundIcon className='size-4 stroke-muted-foreground lg:size-5' />
+                    <Typography tag='p' variant='body3' className='xsx:text-xs'>
+                      {activity.participants}
+                    </Typography>
+                  </ActivityCardContentItem>
+                )}
+                {activity.likes && (
+                  <ActivityCardContentItem>
+                    <HeartIcon className='size-4 stroke-muted-foreground lg:size-5' />
+                    <Typography tag='p' variant='body3' className='xsx:text-xs'>
+                      {activity.likes}
+                    </Typography>
+                  </ActivityCardContentItem>
+                )}
+              </div> */}
+      </ActivityCardHeaderTop>
+      <ActivityCardName className='text-lg 2md:text-xl'>{activity.name}</ActivityCardName>
+    </ActivityCardHeader>
+    <ActivityCardContent className='mt-[11px]'>
+      <div className='flex gap-[20px]'>
+        {activity.ageLimit[0] && (
+          <ActivityCardContentItem>
+            <UserRoundIcon className='size-4 stroke-muted-foreground lg:size-5' />
+            <Typography tag='p' variant='body3' className='text-gray-two'>
+              <I18nText
+                path='landing.activities.card.minimumAge'
+                values={{ age: activity.ageLimit[0] }}
+              />
+            </Typography>
+          </ActivityCardContentItem>
+        )}
+        {activity.duration && (
+          <ActivityCardContentItem>
+            <Clock4Icon className='size-4 stroke-muted-foreground lg:size-5' />
+            <Typography tag='p' variant='body3' className='text-gray-two'>
+              <I18nText
+                path='landing.activities.card.duration'
+                values={{ duration: activity.duration }}
+              />
+            </Typography>
+          </ActivityCardContentItem>
+        )}
+      </div>
+    </ActivityCardContent>
+    <ActivityCardDivider className='mt-4' />
+  </ActivityCard>
+);