fix: refactor contributor page

docs/community/Streams/12-2024/2024-12-10.md

@@ -15,45 +15,26 @@ YouTube Link: https://www.youtube.com/watch?v=6I9e9pJprDI
 
 Part 1: Trusted Execution Environments (TEEs) with Agent Joshua
 - **00:00:09** - Stream starts, initial setup issues.
-  - Link: <https://www.youtube.com/watch?v=6I9e9pJprDI&t=9>
 - **00:01:58** - Intro to Trusted Execution Environments (TEEs).
-  - Link: <https://www.youtube.com/watch?v=6I9e9pJprDI&t=118>
 - **00:08:03** - Agent Joshua begins explaining TEEs and the Eliza plugin.
-  - Link: <https://www.youtube.com/watch?v=6I9e9pJprDI&t=483>
 - **00:19:15** - Deeper dive into remote attestation.
-  - Link: <https://www.youtube.com/watch?v=6I9e9pJprDI&t=1155>
 - **00:24:50** - Discussion of derived keys.
-  - Link: <https://www.youtube.com/watch?v=6I9e9pJprDI&t=1490>
 - **00:37:00** - Deploying to a real TEE, Phala Network's TEE cloud.
-  - Link: <https://www.youtube.com/watch?v=6I9e9pJprDI&t=2220>
 - **00:50:48** - Q&A with Joshua, contact info, and next steps.
-  - Link: <https://www.youtube.com/watch?v=6I9e9pJprDI&t=3048>
 
 Part 2: Building a Domino's pizza ordering agent
 - **01:04:37** - Transition to building a Domino's pizza ordering agent.
-  - Link: <https://www.youtube.com/watch?v=6I9e9pJprDI&t=3877>
 - **01:14:20** - Discussion of the pizza ordering agent’s order flow and state machine.
-  - Link: <https://www.youtube.com/watch?v=6I9e9pJprDI&t=4460>
 - **01:22:07** - Using Claude to generate a state machine diagram.
-  - Link: <https://www.youtube.com/watch?v=6I9e9pJprDI&t=4927>
 - **01:32:17** - Creating the Domino's plugin in Eliza.
-  - Link: <https://www.youtube.com/watch?v=6I9e9pJprDI&t=5537>
 - **01:54:15** - Working on the pizza order provider.
-  - Link: <https://www.youtube.com/watch?v=6I9e9pJprDI&t=6855>
 - **02:16:46** - Pizza provider code completed.
-  - Link: <https://www.youtube.com/watch?v=6I9e9pJprDI&t=8206>
 - **02:28:50** - Discussion of caching customer and order data.
-  - Link: <https://www.youtube.com/watch?v=6I9e9pJprDI&t=8930>
 - **03:13:45** - Pushing fixes to main branch and continuing work on the agent.
-  - Link: <https://www.youtube.com/watch?v=6I9e9pJprDI&t=11625>
 - **04:24:30** - Discussion of summarizing past agent dev school sessions.
-  - Link: <https://www.youtube.com/watch?v=6I9e9pJprDI&t=15870>
 - **05:01:18** - Shaw returns, admits to ordering Domino's manually.
-  - Link: <https://www.youtube.com/watch?v=6I9e9pJprDI&t=18078>
 - **05:09:00** - Discussing payment flow and a confirm order action.
-  - Link: <https://www.youtube.com/watch?v=6I9e9pJprDI&t=18540>
 - **05:27:17** - Final code push, wrap-up, and end of stream.
-  - Link: <https://www.youtube.com/watch?v=6I9e9pJprDI&t=19637>
 
 
 ## Summary

docs/community/components/Accordion.tsx

@@ -0,0 +1,183 @@
+import React, { useState, useRef, useEffect } from "react";
+import { GitHubItem } from "./Contributions";
+import { GITHUB_PAGE_LIMIT } from "./Contributors";
+
+interface AccordionProps {
+    title: string;
+    isOpen: boolean;
+    onToggle: () => void;
+    data: GitHubItem[];
+    loadMore?: () => void;
+    total_count: number;
+    primaryText?: string;
+    secondaryText?: string;
+    mainBackgroundColor?: string;
+}
+
+export const Accordion: React.FC<AccordionProps> = ({
+    title,
+    isOpen,
+    onToggle,
+    data,
+    loadMore,
+    total_count,
+    primaryText,
+    secondaryText,
+    mainBackgroundColor,
+}) => {
+    const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+    const [hoverLoadMore, setHoverLoadMore] = useState<boolean>(false);
+    const [maxHeight, setMaxHeight] = useState<string>(
+        isOpen ? "1000px" : "0px",
+    );
+
+    const contentRef = useRef<HTMLDivElement>(null);
+
+    React.useEffect(() => {
+        setMaxHeight(isOpen ? "1000px" : "0px");
+    }, [isOpen]);
+
+    useEffect(() => {
+        if (contentRef.current && data.length > GITHUB_PAGE_LIMIT) {
+            contentRef.current.scrollTo({
+                top: contentRef.current.scrollHeight,
+                behavior: "smooth",
+            });
+        }
+    }, [data]);
+
+    return (
+        <div
+            style={{
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center",
+                borderRadius: "0.5rem",
+                padding: "1rem",
+                color: primaryText ?? "black",
+                background: mainBackgroundColor ?? "",
+            }}
+        >
+            <div
+                onClick={onToggle}
+                style={{
+                    cursor: "pointer",
+                    fontWeight: "bold",
+                    fontSize: "1rem",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    width: "100%",
+                }}
+            >
+                <div>{title}</div>
+                <div
+                    style={{
+                        transform: isOpen ? "rotate(90deg)" : "rotate(0deg)",
+                        transition: "transform 0.3s ease",
+                    }}
+                >
+                    {"▶"}
+                </div>
+            </div>
+            <div
+                ref={contentRef}
+                style={{
+                    maxHeight,
+                    overflow: "scroll",
+                    transition: isOpen ? "max-height 1s ease" : "",
+                    scrollbarWidth: "none",
+                    msOverflowStyle: "none",
+                }}
+            >
+                <div
+                    style={{
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: "1rem",
+                        margin: "2rem 0 1rem 1rem",
+                    }}
+                >
+                    {data.map((entry, index) => (
+                        <div
+                            key={index}
+                            style={{
+                                opacity: hoveredIndex === index ? 0.8 : 1.0,
+                            }}
+                        >
+                            <div
+                                style={{
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    marginBottom: "0.5rem",
+                                    cursor: "pointer",
+                                    transition: "color 0.2s ease",
+                                }}
+                                onMouseEnter={() => setHoveredIndex(index)}
+                                onMouseLeave={() => setHoveredIndex(null)}
+                                onClick={() =>
+                                    window.open(
+                                        entry.html_url,
+                                        "_blank",
+                                        "noopener,noreferrer",
+                                    )
+                                }
+                            >
+                                <div
+                                    style={{
+                                        display: "flex",
+                                        alignItems: "center",
+                                        gap: "0.5rem",
+                                    }}
+                                >
+                                    {entry.bullet && (
+                                        <div
+                                            style={{
+                                                width: "0.5rem",
+                                                height: "0.5rem",
+                                                borderRadius: "50%",
+                                                backgroundColor: entry.bullet,
+                                            }}
+                                        ></div>
+                                    )}
+                                    <div>{entry.title}</div>
+                                </div>
+                                <div
+                                    style={{
+                                        fontSize: "0.8rem",
+                                        color: secondaryText ?? "gray",
+                                    }}
+                                >
+                                    {entry.created_at.split("T")[0]}
+                                </div>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+            {isOpen && loadMore && data.length < total_count && (
+                <div
+                    style={{
+                        width: "100%",
+                        display: "flex",
+                        justifyContent: "center",
+                    }}
+                >
+                    <span
+                        style={{
+                            color: hoverLoadMore
+                                ? (secondaryText ?? "#3b82f6")
+                                : (primaryText ?? "black"),
+                            cursor: "pointer",
+                        }}
+                        onMouseEnter={() => setHoverLoadMore(true)}
+                        onMouseLeave={() => setHoverLoadMore(false)}
+                        onClick={loadMore}
+                    >
+                        Load more
+                    </span>
+                </div>
+            )}
+        </div>
+    );
+};