From 240519369dc0dc8c3a407728476ea0ef96a624ed Mon Sep 17 00:00:00 2001
From: adel <adeelguitoun@gmail.com>
Date: Thu, 26 Dec 2024 09:26:02 +0100
Subject: [PATCH 1/5] Added support for render props function in Timeline.Point

---
 .../src/components/Timeline/Timeline.spec.tsx | 32 +++++++
 .../components/Timeline/Timeline.stories.tsx  | 94 +++++++++++++++++++
 .../src/components/Timeline/TimelinePoint.tsx |  4 +
 3 files changed, 130 insertions(+)

diff --git a/packages/ui/src/components/Timeline/Timeline.spec.tsx b/packages/ui/src/components/Timeline/Timeline.spec.tsx
index ed9f27730..78b6cf8e8 100644
--- a/packages/ui/src/components/Timeline/Timeline.spec.tsx
+++ b/packages/ui/src/components/Timeline/Timeline.spec.tsx
@@ -21,6 +21,13 @@ describe("Components / Timeline", () => {
       expect(timelinePoint().childNodes[0]).toContainHTML("svg");
     });
 
+    it("should render custom inner content when using render prop", () => {
+      render(<TestTimelineWithRenderProp horizontal={true} />);
+
+      expect(timelinePoint()).toBeInTheDocument();
+      expect(timelinePoint().childNodes[0]).toContainHTML("img");
+    });
+
     it("should use `horizontal` classes of content if provided", () => {
       render(
         <Flowbite theme={{ theme }}>
@@ -56,6 +63,13 @@ describe("Components / Timeline", () => {
       expect(timelinePoint().childNodes[0]).toContainHTML("svg");
     });
 
+    it("should render custom inner content when using render prop", () => {
+      render(<TestTimelineWithRenderProp horizontal={false} />);
+
+      expect(timelinePoint()).toBeInTheDocument();
+      expect(timelinePoint().childNodes[0]).toContainHTML("img");
+    });
+
     it("should use `vertical` classes of content if provided", () => {
       render(
         <Flowbite theme={{ theme }}>
@@ -135,6 +149,24 @@ const TestTimelineWithIcon: FC<TimelineProps> = ({ horizontal, className }): JSX
   );
 };
 
+const TestTimelineWithRenderProp: FC<TimelineProps> = ({ horizontal, className }): JSX.Element => {
+  return (
+    <Timeline horizontal={horizontal} className={className}>
+      <Timeline.Item>
+        <Timeline.Point render={() => <img src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" />} />
+        <Timeline.Content>
+          <Timeline.Time>February 2022</Timeline.Time>
+          <Timeline.Title>Application UI code in Tailwind CSS</Timeline.Title>
+          <Timeline.Body>
+            Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order
+            E-commerce & Marketing pages.
+          </Timeline.Body>
+        </Timeline.Content>
+      </Timeline.Item>
+    </Timeline>
+  );
+};
+
 const IconSVG = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
diff --git a/packages/ui/src/components/Timeline/Timeline.stories.tsx b/packages/ui/src/components/Timeline/Timeline.stories.tsx
index 500ef96fc..4ae86d49e 100644
--- a/packages/ui/src/components/Timeline/Timeline.stories.tsx
+++ b/packages/ui/src/components/Timeline/Timeline.stories.tsx
@@ -1,4 +1,7 @@
 import type { Meta, StoryFn } from "@storybook/react";
+import { Avatar } from "../Avatar";
+import { Badge } from "../Badge";
+import { Card } from "../Card";
 import type { TimelineProps } from "./Timeline";
 import { Timeline } from "./Timeline";
 
@@ -48,3 +51,94 @@ Default.args = {
     </>
   ),
 };
+
+export const ActivityLog = Template.bind({});
+ActivityLog.args = {
+  children: (
+    <>
+      <Timeline.Item>
+        <Timeline.Point
+          render={() => (
+            <Avatar img="https://flowbite.com/docs/images/people/profile-picture-3.jpg" rounded size="xm" />
+          )}
+        />
+        <Timeline.Content>
+          <Timeline.Body>
+            <Card>
+              <div className="-m-2 sm:flex sm:items-center sm:justify-between">
+                <time className="mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0">just now</time>
+
+                <div className="text-sm font-normal text-gray-500 dark:text-gray-300">
+                  Bonnie moved{" "}
+                  <a href="#" className="font-semibold text-blue-600 hover:underline dark:text-blue-500">
+                    Jese Leos
+                  </a>{" "}
+                  to{" "}
+                  <Badge color="gray" className="inline">
+                    Funny Group
+                  </Badge>
+                </div>
+              </div>
+            </Card>
+          </Timeline.Body>
+        </Timeline.Content>
+      </Timeline.Item>
+      <Timeline.Item>
+        <Timeline.Point
+          render={() => (
+            <Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" rounded size="xm" />
+          )}
+        />
+        <Timeline.Content>
+          <Timeline.Body>
+            <Card>
+              <div className="-m-2">
+                <div className="mb-3 sm:flex sm:items-center sm:justify-between">
+                  <time className="mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0">2 hours ago</time>
+                  <div className="text-sm font-normal text-gray-500 dark:text-gray-300">
+                    Thomas Lean commented on{" "}
+                    <a href="#" className="font-semibold text-gray-900 hover:underline dark:text-white">
+                      Flowbite Pro
+                    </a>
+                  </div>
+                </div>
+
+                <Card className="border-gray-200 bg-gray-50 text-xs font-normal italic text-gray-500 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-300">
+                  <div className="-m-3">
+                    Hi ya'll! I wanted to share a webinar zeroheight is having regarding how to best measure your design
+                    system! This is the second session of our new webinar series on #DesignSystems discussions where
+                    we'll be speaking about Measurement.
+                  </div>
+                </Card>
+              </div>
+            </Card>
+          </Timeline.Body>
+        </Timeline.Content>
+      </Timeline.Item>
+      <Timeline.Item>
+        <Timeline.Point
+          render={() => (
+            <Avatar img="https://flowbite.com/docs/images/people/profile-picture-1.jpg" rounded size="xm" />
+          )}
+        />
+        <Timeline.Content>
+          <Timeline.Body>
+            <Card>
+              <div className="-m-2 sm:flex sm:items-center sm:justify-between">
+                <time className="mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0">1 day ago</time>
+
+                <div className="text-sm font-normal text-gray-500 dark:text-gray-300">
+                  Jese Leos has changed{" "}
+                  <a href="#" className="font-semibold text-blue-600 hover:underline dark:text-blue-500">
+                    Pricing page
+                  </a>{" "}
+                  task status to <span className="font-semibold text-gray-900 dark:text-white">Finished</span>
+                </div>
+              </div>
+            </Card>
+          </Timeline.Body>
+        </Timeline.Content>
+      </Timeline.Item>
+    </>
+  ),
+};
diff --git a/packages/ui/src/components/Timeline/TimelinePoint.tsx b/packages/ui/src/components/Timeline/TimelinePoint.tsx
index 17112af06..0291efe5d 100644
--- a/packages/ui/src/components/Timeline/TimelinePoint.tsx
+++ b/packages/ui/src/components/Timeline/TimelinePoint.tsx
@@ -26,6 +26,7 @@ export interface FlowbiteTimelinePointTheme {
 export interface TimelnePointProps extends ComponentProps<"div"> {
   icon?: FC<ComponentProps<"svg">>;
   theme?: DeepPartial<FlowbiteTimelinePointTheme>;
+  render?: () => React.ReactElement;
 }
 
 export const TimelinePoint: FC<TimelnePointProps> = ({
@@ -33,6 +34,7 @@ export const TimelinePoint: FC<TimelnePointProps> = ({
   className,
   icon: Icon,
   theme: customTheme = {},
+  render = undefined,
   ...props
 }) => {
   const { horizontal } = useTimelineContext();
@@ -51,6 +53,8 @@ export const TimelinePoint: FC<TimelnePointProps> = ({
         <span className={twMerge(theme.marker.icon.wrapper)}>
           <Icon aria-hidden className={twMerge(theme.marker.icon.base)} />
         </span>
+      ) : render ? (
+        <span className={twMerge(theme.marker.icon.wrapper)}>{render()}</span>
       ) : (
         <div
           className={twMerge(horizontal && theme.marker.base.horizontal, !horizontal && theme.marker.base.vertical)}

From 6252528480ee2f9f586801eaa554a4f17f3bfcfd Mon Sep 17 00:00:00 2001
From: adel <adeelguitoun@gmail.com>
Date: Thu, 26 Dec 2024 09:29:13 +0100
Subject: [PATCH 2/5] Added docs for the Timeline.Point render prop

---
 apps/web/content/docs/components/timeline.mdx |   6 +
 apps/web/examples/timeline/index.ts           |   1 +
 .../web/examples/timeline/timeline.render.tsx | 211 ++++++++++++++++++
 3 files changed, 218 insertions(+)
 create mode 100644 apps/web/examples/timeline/timeline.render.tsx

diff --git a/apps/web/content/docs/components/timeline.mdx b/apps/web/content/docs/components/timeline.mdx
index 62733b489..1402afbeb 100644
--- a/apps/web/content/docs/components/timeline.mdx
+++ b/apps/web/content/docs/components/timeline.mdx
@@ -31,6 +31,12 @@ Use the `horizontal` prop to show the timeline component and the child component
 
 <Example name="timeline.horizontal" />
 
+## Render props
+
+Use the `render` prop to render an Avatar or any other component as TimelinePoint inner content.
+
+<Example name="timeline.render" />
+
 ## Theme
 
 To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).
diff --git a/apps/web/examples/timeline/index.ts b/apps/web/examples/timeline/index.ts
index 479235816..8ba113a98 100644
--- a/apps/web/examples/timeline/index.ts
+++ b/apps/web/examples/timeline/index.ts
@@ -1,3 +1,4 @@
 export { horizontal } from "./timeline.horizontal";
 export { root } from "./timeline.root";
 export { vertical } from "./timeline.vertical";
+export { render } from "./timeline.render";
diff --git a/apps/web/examples/timeline/timeline.render.tsx b/apps/web/examples/timeline/timeline.render.tsx
new file mode 100644
index 000000000..e61e5822c
--- /dev/null
+++ b/apps/web/examples/timeline/timeline.render.tsx
@@ -0,0 +1,211 @@
+"use client";
+
+import {
+  Avatar,
+  Badge,
+  Card,
+  Timeline,
+  TimelineBody,
+  TimelineContent,
+  TimelineItem,
+  TimelinePoint,
+} from "flowbite-react";
+import { type CodeData } from "~/components/code-demo";
+
+const code = `
+"use client";
+
+import { Avatar, Badge, Timeline } from "flowbite-react";
+
+export function Component() {
+  <Timeline>
+    <Timeline.Item>
+      <Timeline.Point
+        render={() => (
+          <Avatar img="https://flowbite.com/docs/images/people/profile-picture-3.jpg" rounded size="xm" />
+        )}
+      />
+      <Timeline.Content>
+        <Timeline.Body>
+          <Card>
+            <div className="-m-2 sm:flex sm:items-center sm:justify-between">
+              <time className="mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0">just now</time>
+
+              <div className="text-sm font-normal text-gray-500 dark:text-gray-300">
+                Bonnie moved{" "}
+                <a href="#" className="font-semibold text-blue-600 hover:underline dark:text-blue-500">
+                  Jese Leos
+                </a>{" "}
+                to{" "}
+                <Badge color="gray" className="inline">
+                  Funny Group
+                </Badge>
+              </div>
+            </div>
+          </Card>
+        </Timeline.Body>
+      </Timeline.Content>
+    </Timeline.Item>
+    <Timeline.Item>
+      <Timeline.Point
+        render={() => (
+          <Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" rounded size="xm" />
+        )}
+      />
+      <Timeline.Content>
+        <Timeline.Body>
+          <Card>
+            <div className="-m-2">
+              <div className="mb-3 sm:flex sm:items-center sm:justify-between">
+                <time className="mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0">2 hours ago</time>
+                <div className="text-sm font-normal text-gray-500 dark:text-gray-300">
+                  Thomas Lean commented on{" "}
+                  <a href="#" className="font-semibold text-gray-900 hover:underline dark:text-white">
+                    Flowbite Pro
+                  </a>
+                </div>
+              </div>
+
+              <Card className="border-gray-200 bg-gray-50 text-xs font-normal italic text-gray-500 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-300">
+                <div className="-m-3">
+                  Hi ya'll! I wanted to share a webinar zeroheight is having regarding how to best measure your design
+                  system! This is the second session of our new webinar series on #DesignSystems discussions where
+                  we'll be speaking about Measurement.
+                </div>
+              </Card>
+            </div>
+          </Card>
+        </Timeline.Body>
+      </Timeline.Content>
+    </Timeline.Item>
+    <Timeline.Item>
+      <Timeline.Point
+        render={() => (
+          <Avatar img="https://flowbite.com/docs/images/people/profile-picture-1.jpg" rounded size="xm" />
+        )}
+      />
+      <Timeline.Content>
+        <Timeline.Body>
+          <Card>
+            <div className="-m-2 sm:flex sm:items-center sm:justify-between">
+              <time className="mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0">1 day ago</time>
+
+              <div className="text-sm font-normal text-gray-500 dark:text-gray-300">
+                Jese Leos has changed{" "}
+                <a href="#" className="font-semibold text-blue-600 hover:underline dark:text-blue-500">
+                  Pricing page
+                </a>{" "}
+                task status to <span className="font-semibold text-gray-900 dark:text-white">Finished</span>
+              </div>
+            </div>
+          </Card>
+        </Timeline.Body>
+      </Timeline.Content>
+    </Timeline.Item>
+  </Timeline>
+}
+`;
+
+export function Component() {
+  return (
+    <Timeline>
+      <TimelineItem>
+        <TimelinePoint
+          render={() => (
+            <Avatar img="https://flowbite.com/docs/images/people/profile-picture-3.jpg" rounded size="xm" />
+          )}
+        />
+        <TimelineContent>
+          <TimelineBody>
+            <Card>
+              <div className="-m-2 sm:flex sm:items-center sm:justify-between">
+                <time className="mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0">just now</time>
+
+                <div className="text-sm font-normal text-gray-500 dark:text-gray-300">
+                  Bonnie moved{" "}
+                  <a href="#" className="font-semibold text-blue-600 hover:underline dark:text-blue-500">
+                    Jese Leos
+                  </a>{" "}
+                  to{" "}
+                  <Badge color="gray" className="inline">
+                    Funny Group
+                  </Badge>
+                </div>
+              </div>
+            </Card>
+          </TimelineBody>
+        </TimelineContent>
+      </TimelineItem>
+      <TimelineItem>
+        <TimelinePoint
+          render={() => (
+            <Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" rounded size="xm" />
+          )}
+        />
+        <TimelineContent>
+          <TimelineBody>
+            <Card>
+              <div className="-m-2">
+                <div className="mb-3 sm:flex sm:items-center sm:justify-between">
+                  <time className="mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0">2 hours ago</time>
+                  <div className="text-sm font-normal text-gray-500 dark:text-gray-300">
+                    Thomas Lean commented on{" "}
+                    <a href="#" className="font-semibold text-gray-900 hover:underline dark:text-white">
+                      Flowbite Pro
+                    </a>
+                  </div>
+                </div>
+
+                <Card className="border-gray-200 bg-gray-50 text-xs font-normal italic text-gray-500 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-300">
+                  <div className="-m-3">
+                    Hi ya'll! I wanted to share a webinar zeroheight is having regarding how to best measure your design
+                    system! This is the second session of our new webinar series on #DesignSystems discussions where
+                    we'll be speaking about Measurement.
+                  </div>
+                </Card>
+              </div>
+            </Card>
+          </TimelineBody>
+        </TimelineContent>
+      </TimelineItem>
+      <TimelineItem>
+        <TimelinePoint
+          render={() => (
+            <Avatar img="https://flowbite.com/docs/images/people/profile-picture-1.jpg" rounded size="xm" />
+          )}
+        />
+        <TimelineContent>
+          <TimelineBody>
+            <Card>
+              <div className="-m-2 sm:flex sm:items-center sm:justify-between">
+                <time className="mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0">1 day ago</time>
+
+                <div className="text-sm font-normal text-gray-500 dark:text-gray-300">
+                  Jese Leos has changed{" "}
+                  <a href="#" className="font-semibold text-blue-600 hover:underline dark:text-blue-500">
+                    Pricing page
+                  </a>{" "}
+                  task status to <span className="font-semibold text-gray-900 dark:text-white">Finished</span>
+                </div>
+              </div>
+            </Card>
+          </TimelineBody>
+        </TimelineContent>
+      </TimelineItem>
+    </Timeline>
+  );
+}
+
+export const render: CodeData = {
+  type: "single",
+  code: [
+    {
+      fileName: "client",
+      language: "tsx",
+      code,
+    },
+  ],
+  githubSlug: "timeline/timeline.render.tsx",
+  component: <Component />,
+  iframe: 391,
+};

From efea456f82f18d733f7142e3ab9cc64e1b6f3778 Mon Sep 17 00:00:00 2001
From: adel <adeelguitoun@gmail.com>
Date: Sat, 28 Dec 2024 16:46:23 +0100
Subject: [PATCH 3/5] Remove redundant 'undefined" value for render prop.

---
 packages/ui/src/components/Timeline/TimelinePoint.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/Timeline/TimelinePoint.tsx b/packages/ui/src/components/Timeline/TimelinePoint.tsx
index 0291efe5d..2c68dacd9 100644
--- a/packages/ui/src/components/Timeline/TimelinePoint.tsx
+++ b/packages/ui/src/components/Timeline/TimelinePoint.tsx
@@ -34,7 +34,7 @@ export const TimelinePoint: FC<TimelnePointProps> = ({
   className,
   icon: Icon,
   theme: customTheme = {},
-  render = undefined,
+  render,
   ...props
 }) => {
   const { horizontal } = useTimelineContext();

From de75a474e85a4dcff321c145592da54b47fcca0f Mon Sep 17 00:00:00 2001
From: adel <adeelguitoun@gmail.com>
Date: Sat, 28 Dec 2024 16:46:57 +0100
Subject: [PATCH 4/5] Added patch changeset

---
 .changeset/lucky-ladybugs-film.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/lucky-ladybugs-film.md

diff --git a/.changeset/lucky-ladybugs-film.md b/.changeset/lucky-ladybugs-film.md
new file mode 100644
index 000000000..3a12afbdf
--- /dev/null
+++ b/.changeset/lucky-ladybugs-film.md
@@ -0,0 +1,5 @@
+---
+"flowbite-react": patch
+---
+
+Allow `Timeline.Point` to render components as inner content.

From 2c54812ed8b424733b82894739c7e345595cce3c Mon Sep 17 00:00:00 2001
From: adel <adeelguitoun@gmail.com>
Date: Wed, 15 Jan 2025 17:14:27 +0100
Subject: [PATCH 5/5] Update TimelinePoint render prop type to return
 React.ReactNode

---
 packages/ui/src/components/Timeline/TimelinePoint.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/Timeline/TimelinePoint.tsx b/packages/ui/src/components/Timeline/TimelinePoint.tsx
index 2c68dacd9..6c660f9d9 100644
--- a/packages/ui/src/components/Timeline/TimelinePoint.tsx
+++ b/packages/ui/src/components/Timeline/TimelinePoint.tsx
@@ -26,7 +26,7 @@ export interface FlowbiteTimelinePointTheme {
 export interface TimelnePointProps extends ComponentProps<"div"> {
   icon?: FC<ComponentProps<"svg">>;
   theme?: DeepPartial<FlowbiteTimelinePointTheme>;
-  render?: () => React.ReactElement;
+  render?: () => React.ReactNode;
 }
 
 export const TimelinePoint: FC<TimelnePointProps> = ({