From cdae4454e39341c79ee05b9d4dcc978505af9105 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Mon, 3 Jun 2024 11:13:18 -0700
Subject: [PATCH] add QR code icon

---
 .../icons/qrCode_stroke2_corner0_rounded.svg  |  1 +
 src/components/icons/QrCode.tsx               |  5 ++
 src/screens/StarterPack/Main/index.tsx        | 58 +++++++++++++++----
 3 files changed, 53 insertions(+), 11 deletions(-)
 create mode 100644 assets/icons/qrCode_stroke2_corner0_rounded.svg
 create mode 100644 src/components/icons/QrCode.tsx

diff --git a/assets/icons/qrCode_stroke2_corner0_rounded.svg b/assets/icons/qrCode_stroke2_corner0_rounded.svg
new file mode 100644
index 0000000000..b17db39533
--- /dev/null
+++ b/assets/icons/qrCode_stroke2_corner0_rounded.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#080B12" fill-rule="evenodd" d="M3 5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5Zm6 0H5v4h4V5ZM3 15a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4Zm6 0H5v4h4v-4ZM13 5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2V5Zm6 0h-4v4h4V5ZM14 13a1 1 0 0 1 1 1v1h1a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1Zm3 1a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1Zm0 4a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-1v1a1 1 0 1 1-2 0v-2Z" clip-rule="evenodd"/></svg>
diff --git a/src/components/icons/QrCode.tsx b/src/components/icons/QrCode.tsx
new file mode 100644
index 0000000000..e841071f70
--- /dev/null
+++ b/src/components/icons/QrCode.tsx
@@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const QrCode_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M3 5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5Zm6 0H5v4h4V5ZM3 15a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4Zm6 0H5v4h4v-4ZM13 5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2V5Zm6 0h-4v4h4V5ZM14 13a1 1 0 0 1 1 1v1h1a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1Zm3 1a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1Zm0 4a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-1v1a1 1 0 1 1-2 0v-2Z',
+})
diff --git a/src/screens/StarterPack/Main/index.tsx b/src/screens/StarterPack/Main/index.tsx
index 1bb4fa11f4..d4bf8b8274 100644
--- a/src/screens/StarterPack/Main/index.tsx
+++ b/src/screens/StarterPack/Main/index.tsx
@@ -8,11 +8,15 @@ import {CommonNavigatorParams} from 'lib/routes/types'
 import {isWeb} from 'platform/detection'
 import {PagerWithHeader} from 'view/com/pager/PagerWithHeader'
 import {ProfileSubpageHeader} from 'view/com/profile/ProfileSubpageHeader'
+import {EventStopper} from 'view/com/util/EventStopper'
 import {CenteredView} from 'view/com/util/Views'
 import {FeedsList} from '#/screens/StarterPack/Main/FeedsList'
 import {ProfilesList} from '#/screens/StarterPack/Main/ProfilesList'
 import {atoms as a} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
+import {ArrowOutOfBox_Stroke2_Corner0_Rounded as ArrowOutOfBox} from '#/components/icons/ArrowOutOfBox'
+import {QrCode_Stroke2_Corner0_Rounded as QrCode} from '#/components/icons/QrCode'
+import * as Menu from '#/components/Menu'
 
 /**
  * TEMPORARY CONTENT, DO NOT TRANSLATE
@@ -96,7 +100,7 @@ export function StarterPackScreen({}: NativeStackScreenProps<
   // const {id} = route.params
 
   return (
-    <CenteredView style={a.flex_1}>
+    <CenteredView style={[a.h_full_vh]}>
       <StarterPackScreenInner />
     </CenteredView>
   )
@@ -148,16 +152,48 @@ function Header({isOwn}: {isOwn: boolean}) {
         creator={undefined}
         avatarType="starter-pack">
         <View style={[a.flex_row, a.gap_sm]}>
-          <Button
-            label={_(msg`Share`)}
-            variant="solid"
-            color="primary"
-            size="small"
-            onPress={() => {}}>
-            <ButtonText>
-              <Trans>Share</Trans>
-            </ButtonText>
-          </Button>
+          <EventStopper onKeyDown={false}>
+            <Menu.Root>
+              <Menu.Trigger label={_(msg`Repost or quote post`)}>
+                {({props}) => {
+                  return (
+                    <Button
+                      label={_(msg`Share`)}
+                      variant="solid"
+                      color="primary"
+                      size="small"
+                      {...props}>
+                      <ButtonText>
+                        <Trans>Share</Trans>
+                      </ButtonText>
+                    </Button>
+                  )
+                }}
+              </Menu.Trigger>
+              <Menu.Outer style={{minWidth: 170}}>
+                <Menu.Group>
+                  <Menu.Item
+                    label={_(msg`Share link`)}
+                    testID="shareStarterPackLinkBtn"
+                    onPress={() => {}}>
+                    <Menu.ItemText>
+                      <Trans>Share link</Trans>
+                    </Menu.ItemText>
+                    <Menu.ItemIcon icon={ArrowOutOfBox} position="right" />
+                  </Menu.Item>
+                  <Menu.Item
+                    label={_(msg`Create QR code`)}
+                    testID="createQRCodeBtn"
+                    onPress={() => {}}>
+                    <Menu.ItemText>
+                      <Trans>Create QR code</Trans>
+                    </Menu.ItemText>
+                    <Menu.ItemIcon icon={QrCode} position="right" />
+                  </Menu.Item>
+                </Menu.Group>
+              </Menu.Outer>
+            </Menu.Root>
+          </EventStopper>
           {isOwn && (
             <Button
               label={_(msg`Edit`)}