Dev

package.json

@@ -5,46 +5,47 @@
     "private": true,
     "type": "module",
     "scripts": {
-      "build": "bun next build",
-      "dev": "bun next dev",
-      "lint": "bun run lint:biome && bun run lint:tsc && bun run lint:eslint",
-      "lint:biome": "bun biome check --write .",
-      "lint:tsc": "bun tsc --noEmit",
-      "lint:eslint": "bun eslint --fix",
-      "prod": "bun run build && bun run start",
-      "start": "bun next start"
+        "build": "bun next build",
+        "dev": "bun next dev",
+        "lint": "bun run lint:biome && bun run lint:tsc && bun run lint:eslint",
+        "lint:biome": "bun biome check --write .",
+        "lint:tsc": "bun tsc --noEmit",
+        "lint:eslint": "bun eslint --fix",
+        "prod": "bun run build && bun run start",
+        "start": "bun next start"
     },
     "dependencies": {
-      "@chakra-ui/icons": "^2.2.4",
-      "@chakra-ui/next-js": "^2.4.2",
-      "@chakra-ui/react": "2.10.2",
-      "@chakra-ui/system": "^2.6.2",
-      "@emotion/cache": "^11.14.0",
-      "@emotion/react": "^11.14.0",
-      "@emotion/styled": "^11.14.0",
-      "@fontsource/inter": "^5.2.5",
-      "@next/bundle-analyzer": "^15.2.3",
-      "framer-motion": "^11.18.2",
-      "jotai": "^2.12.2",
-      "million": "2.6.4",
-      "next": "^14.2.25",
-      "react": "19.0.0",
-      "react-dom": "19.0.0",
-      "react-icons": "^5.5.0",
-      "sharp": "^0.33.5",
-      "typescript": "5.7.2",
-      "utf-8-validate": "^6.0.5"
+        "@chakra-ui/icons": "^2.2.4",
+        "@chakra-ui/next-js": "^2.4.2",
+        "@chakra-ui/react": "2.10.2",
+        "@chakra-ui/system": "^2.6.2",
+        "@emotion/cache": "^11.14.0",
+        "@emotion/react": "^11.14.0",
+        "@emotion/styled": "^11.14.0",
+        "@fontsource/inter": "^5.2.5",
+        "@next/bundle-analyzer": "^15.2.3",
+        "date-fns": "^4.1.0",
+        "framer-motion": "^11.18.2",
+        "jotai": "^2.12.2",
+        "million": "2.6.4",
+        "next": "^14.2.25",
+        "react": "19.0.0",
+        "react-dom": "19.0.0",
+        "react-icons": "^5.5.0",
+        "react-markdown": "^10.1.0",
+        "sharp": "^0.33.5",
+        "typescript": "5.7.2",
+        "utf-8-validate": "^6.0.5"
     },
     "devDependencies": {
-      "@biomejs/biome": "^1.9.4",
-      "@types/node": "22.10.2",
-      "@types/react": "19.0.2",
-      "@types/react-dom": "19.0.2",
-      "eslint": "^9.22.0",
-      "eslint-config-next": "^15.2.3"
+        "@biomejs/biome": "^1.9.4",
+        "@types/node": "22.10.2",
+        "@types/react": "19.0.2",
+        "@types/react-dom": "19.0.2",
+        "eslint": "^9.22.0",
+        "eslint-config-next": "^15.2.3"
     },
     "trustedDependencies": [
-      "@biomejs/biome"
+        "@biomejs/biome"
     ]
-  }
-
+}

src/app/classes/[id]/activities/[activityId]/page.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import ActivityScreen from '@/components/screens/ActivityScreen';
+import { useParams } from 'next/navigation';
+
+export default function ActivityPage() {
+	const { id, activityId } = useParams<{ id: string; activityId: string }>();
+	return <ActivityScreen classroomId={id} activityId={activityId} />;
+}

src/components/general/ActivityCard.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import type { IActivity } from '@/types/IActivity';
+import { Badge, Box, Card, CardBody, Flex, Heading, Stack, Text } from '@chakra-ui/react';
+import { format } from 'date-fns';
+import { es } from 'date-fns/locale';
+import { FiCalendar, FiFileText } from 'react-icons/fi';
+
+const activityTypeInfo = {
+	assignment: {
+		label: 'Tarea',
+		color: 'blue'
+	},
+	material: {
+		label: 'Material',
+		color: 'green'
+	}
+} as const;
+
+export default function ActivityCard({ activity, onClick }: Readonly<{ activity: IActivity; onClick?: () => void }>) {
+	return (
+		<Card maxW='100%' onClick={onClick} cursor='pointer'>
+			<CardBody>
+				<Stack spacing={4}>
+					<Flex gap={2} align='center'>
+						<Badge colorScheme={activityTypeInfo[activity.type].color} px={2} py={1} borderRadius='md'>
+							{activityTypeInfo[activity.type].label}
+						</Badge>
+						{activity.dueDate && (
+							<Text fontSize='sm' color='gray.400'>
+								Para el{' '}
+								{format(new Date(activity.dueDate), "d 'de' MMMM", {
+									locale: es
+								})}
+							</Text>
+						)}
+					</Flex>
+
+					<Box>
+						<Heading
+							size='md'
+							noOfLines={2}
+							transition='color 0.3s ease'
+							_groupHover={{ color: 'brand.primary.400' }}
+							mb={2}
+						>
+							{activity.title}
+						</Heading>
+						<Text fontSize='sm' noOfLines={2} color='gray.400'>
+							{activity.description}
+						</Text>
+					</Box>
+
+					<Flex justify='space-between' align='center'>
+						{activity.createdAt && (
+							<Flex align='center' gap={2} color='gray.400' fontSize='sm'>
+								<FiCalendar />
+								<Text>
+									Creado el{' '}
+									{format(new Date(activity.createdAt), "d 'de' MMMM", {
+										locale: es
+									})}
+								</Text>
+							</Flex>
+						)}
+						{(activity.content.resources?.length || 0) > 0 && (
+							<Flex align='center' gap={2} color='gray.400' fontSize='sm'>
+								<FiFileText />
+								<Text>
+									{activity.content.resources?.length || 0} recurso
+									{activity.content.resources?.length !== 1 ? 's' : ''}
+								</Text>
+							</Flex>
+						)}
+					</Flex>
+				</Stack>
+			</CardBody>
+		</Card>
+	);
+}