From 60e144ab5e95b7122bea9feed0ed961da802efe9 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Thu, 23 Jan 2025 07:54:03 +0530
Subject: [PATCH] Children

---
 .../Collections/CollectionShare.tsx           | 68 +++++++++----------
 web/packages/base/components/RowButton.tsx    | 13 ++--
 2 files changed, 37 insertions(+), 44 deletions(-)

diff --git a/web/apps/photos/src/components/Collections/CollectionShare.tsx b/web/apps/photos/src/components/Collections/CollectionShare.tsx
index f9a2089df3..14593f1871 100644
--- a/web/apps/photos/src/components/Collections/CollectionShare.tsx
+++ b/web/apps/photos/src/components/Collections/CollectionShare.tsx
@@ -166,10 +166,9 @@ function SharingDetails({ collection, type }) {
     return (
         <>
             <Stack>
-                <RowButtonGroupTitle
-                    title={t("OWNER")}
-                    icon={<AdminPanelSettingsIcon />}
-                />
+                <RowButtonGroupTitle icon={<AdminPanelSettingsIcon />}>
+                    {t("OWNER")}
+                </RowButtonGroupTitle>
                 <RowButtonGroup>
                     <RowButton
                         fontWeight="regular"
@@ -182,10 +181,9 @@ function SharingDetails({ collection, type }) {
             {type == "incomingShareCollaborator" &&
                 collaborators?.length > 0 && (
                     <Stack>
-                        <RowButtonGroupTitle
-                            title={t("COLLABORATORS")}
-                            icon={<ModeEditIcon />}
-                        />
+                        <RowButtonGroupTitle icon={<ModeEditIcon />}>
+                            {t("COLLABORATORS")}
+                        </RowButtonGroupTitle>
                         <RowButtonGroup>
                             {collaborators.map((item, index) => (
                                 <>
@@ -206,10 +204,9 @@ function SharingDetails({ collection, type }) {
                 )}
             {viewers?.length > 0 && (
                 <Stack>
-                    <RowButtonGroupTitle
-                        title={t("VIEWERS")}
-                        icon={<Photo />}
-                    />
+                    <RowButtonGroupTitle icon={<Photo />}>
+                        {t("VIEWERS")}
+                    </RowButtonGroupTitle>
                     <RowButtonGroup>
                         {viewers.map((item, index) => (
                             <>
@@ -286,10 +283,9 @@ const EnablePublicShareOptions: React.FC<EnablePublicShareOptionsProps> = ({
 
     return (
         <Stack>
-            <RowButtonGroupTitle
-                title={t("LINK_SHARE_TITLE")}
-                icon={<PublicIcon />}
-            />
+            <RowButtonGroupTitle icon={<PublicIcon />}>
+                {t("LINK_SHARE_TITLE")}
+            </RowButtonGroupTitle>
             <RowButtonGroup>
                 <RowButton
                     label={t("CREATE_PUBLIC_SHARING")}
@@ -370,12 +366,11 @@ const EmailShare: React.FC<EmailShareProps> = ({ collection, onRootClose }) => {
     return (
         <>
             <Stack>
-                <RowButtonGroupTitle
-                    title={t("shared_with_people_count", {
+                <RowButtonGroupTitle icon={<WorkspacesIcon />}>
+                    {t("shared_with_people_count", {
                         count: collection.sharees?.length ?? 0,
                     })}
-                    icon={<WorkspacesIcon />}
-                />
+                </RowButtonGroupTitle>
                 <RowButtonGroup>
                     {collection.sharees.length > 0 ? (
                         <>
@@ -671,7 +666,9 @@ const AddParticipantForm: React.FC<AddParticipantFormProps> = (props) => {
                     <Stack sx={{ gap: "24px", py: "20px", px: "12px" }}>
                         {props.hiddenPreInput}
                         <Stack>
-                            <RowButtonGroupTitle title={t("ADD_NEW_EMAIL")} />
+                            <RowButtonGroupTitle>
+                                {t("ADD_NEW_EMAIL")}
+                            </RowButtonGroupTitle>
                             <TextField
                                 sx={{ marginTop: 0 }}
                                 hiddenLabel={props.hiddenLabel}
@@ -697,9 +694,9 @@ const AddParticipantForm: React.FC<AddParticipantFormProps> = (props) => {
 
                         {props.optionsList.length > 0 && (
                             <Stack>
-                                <RowButtonGroupTitle
-                                    title={t("OR_ADD_EXISTING")}
-                                />
+                                <RowButtonGroupTitle>
+                                    {t("OR_ADD_EXISTING")}
+                                </RowButtonGroupTitle>
                                 <RowButtonGroup>
                                     {props.optionsList.map((item, index) => (
                                         <>
@@ -916,9 +913,10 @@ const ManageEmailShare: React.FC<ManageEmailShareProps> = ({
                     <Stack sx={{ gap: "24px", py: "20px", px: "12px" }}>
                         <Stack>
                             <RowButtonGroupTitle
-                                title={t("OWNER")}
                                 icon={<AdminPanelSettingsIcon />}
-                            />
+                            >
+                                {t("OWNER")}
+                            </RowButtonGroupTitle>
                             <RowButtonGroup>
                                 <RowButton
                                     fontWeight="regular"
@@ -929,10 +927,9 @@ const ManageEmailShare: React.FC<ManageEmailShareProps> = ({
                             </RowButtonGroup>
                         </Stack>
                         <Stack>
-                            <RowButtonGroupTitle
-                                title={t("COLLABORATORS")}
-                                icon={<ModeEditIcon />}
-                            />
+                            <RowButtonGroupTitle icon={<ModeEditIcon />}>
+                                {t("COLLABORATORS")}
+                            </RowButtonGroupTitle>
                             <RowButtonGroup>
                                 {collaborators.map((item) => (
                                     <>
@@ -962,10 +959,9 @@ const ManageEmailShare: React.FC<ManageEmailShareProps> = ({
                             </RowButtonGroup>
                         </Stack>
                         <Stack>
-                            <RowButtonGroupTitle
-                                title={t("VIEWERS")}
-                                icon={<Photo />}
-                            />
+                            <RowButtonGroupTitle icon={<Photo />}>
+                                {t("VIEWERS")}
+                            </RowButtonGroupTitle>
                             <RowButtonGroup>
                                 {viewers.map((item) => (
                                     <>
@@ -1508,7 +1504,9 @@ const ManagePublicCollect: React.FC<ManagePublicCollectProps> = ({
                     label={t("PUBLIC_COLLECT")}
                 />
             </RowButtonGroup>
-            <RowButtonGroupTitle title={t("PUBLIC_COLLECT_SUBTEXT")} />
+            <RowButtonGroupTitle>
+                {t("PUBLIC_COLLECT_SUBTEXT")}
+            </RowButtonGroupTitle>
         </Stack>
     );
 };
diff --git a/web/packages/base/components/RowButton.tsx b/web/packages/base/components/RowButton.tsx
index 3df04ccc2d..ea57d4ed34 100644
--- a/web/packages/base/components/RowButton.tsx
+++ b/web/packages/base/components/RowButton.tsx
@@ -11,10 +11,6 @@ import {
 import React from "react";
 
 interface RowButtonGroupTitleProps {
-    /**
-     * The title for the row button group.
-     */
-    title: string;
     /**
      * An optional leading SvgIcon before the title.
      */
@@ -24,10 +20,9 @@ interface RowButtonGroupTitleProps {
 /**
  * A section title, meant to precede a {@link RowButtonGroup}.
  */
-export const RowButtonGroupTitle: React.FC<RowButtonGroupTitleProps> = ({
-    title,
-    icon,
-}) => (
+export const RowButtonGroupTitle: React.FC<
+    React.PropsWithChildren<RowButtonGroupTitleProps>
+> = ({ children, icon }) => (
     <Stack
         direction="row"
         sx={{
@@ -42,7 +37,7 @@ export const RowButtonGroupTitle: React.FC<RowButtonGroupTitleProps> = ({
     >
         {icon && icon}
         <Typography variant="small" sx={{ color: "text.muted" }}>
-            {title}
+            {children}
         </Typography>
     </Stack>
 );