diff --git a/new-dti-website/components/courses/DDProjects.tsx b/new-dti-website/components/courses/DDProjects.tsx new file mode 100644 index 000000000..f3fe78184 --- /dev/null +++ b/new-dti-website/components/courses/DDProjects.tsx @@ -0,0 +1,64 @@ +import React, { useState } from 'react'; + +// *INTERFACE +interface DDProjectsProps { + title: string; + description: string; + imageSrc: string; +} + +/** + * `DDProjects` Component - Displays information about past student Projects within Trends :) + * + * @remarks + * This component is used to present information about student projects, including the title, + * description, and an image representing the project that they did in Trends class. There is an interactive expand/collapse + * functionality, allowing the user to toggle additional details with a smooth transition effect. + * The card's background color changes based on its state (open/closed). The component is also responsive to screen size. + * + * The component is designed to receive data via props and a json object. + * + * @param props - Contains: + * - `title`: The title of the project, displayed prominently at the top of the card. + * - `description`: A brief description of the project, revealed when the card is expanded. + * - `imageSrc`: The URL for the image that represents the project, displayed in the expanded view. + */ +export default function DDProjects({ title, description, imageSrc }: DDProjectsProps) { + const [isOpen, setIsOpen] = useState(false); + + const toggleCard = () => { + setIsOpen(!isOpen); + }; + + return ( +
{description}
+ +{description}
+{event.title}
+{event.date}
+{event.time}
+{description}
-{description}
+- A project team is meant, above all, to be a learning experience. Given our mission - of community impact, we want - to help everyone learn and grow{' '} - through our training course in{' '} - product development.{' '} -
++ A project team is meant, above all, to be a learning experience. Given our mission + of{' '} + + community impact + + , we want to help everyone{' '} + learn and grow through + our training course in{' '} + product development.{' '} +
+