Merge pill components

src/components/Pills.tsx

@@ -66,83 +66,24 @@ export function Label({
   const isLabeler = Boolean(desc.sourceType && desc.sourceDid)
   const isBlueskyLabel =
     desc.sourceType === 'labeler' && desc.sourceDid === BSKY_LABELER_DID
-
+  const avi = size === 'lg' ? 16 : 12
-  const {outer, avi, text} = useMemo(() => {
-    switch (size) {
-      case 'lg': {
-        return {
-          outer: [
-            t.atoms.bg_contrast_25,
-            {
-              gap: 5,
-              paddingHorizontal: 5,
-              paddingVertical: 5,
-            },
-          ],
-          avi: 16,
-          text: [a.text_sm],
-        }
-      }
-      case 'sm':
-      default: {
-        return {
-          outer: [
-            !noBg && t.atoms.bg_contrast_25,
-            {
-              gap: 3,
-              paddingHorizontal: 3,
-              paddingVertical: 3,
-            },
-          ],
-          avi: 12,
-          text: [a.text_xs],
-        }
-      }
-    }
-  }, [t, size, noBg])
 
   return (
     <>
-      <Button
+      <LabelBase
-        disabled={disableDetailsDialog}
         label={desc.name}
-        onPress={e => {
+        size={size}
-          e.preventDefault()
+        noBg={noBg}
-          e.stopPropagation()
+        disabled={disableDetailsDialog}
-          control.open()
+        onPress={() => control.open()}
-        }}>
+        icon={
-        {({hovered, pressed}) => (
+          isBlueskyLabel || !isLabeler ? (
-          <View
+            <desc.icon width={avi} fill={t.atoms.text_contrast_medium.color} />
-            style={[
+          ) : (
-              a.flex_row,
+            <UserAvatar avatar={desc.sourceAvi} type="user" size={avi} />
-              a.align_center,
+          )
-              a.rounded_full,
+        }
-              outer,
+      />
-              (hovered || pressed) && t.atoms.bg_contrast_50,
-            ]}>
-            {isBlueskyLabel || !isLabeler ? (
-              <desc.icon
-                width={avi}
-                fill={t.atoms.text_contrast_medium.color}
-              />
-            ) : (
-              <UserAvatar avatar={desc.sourceAvi} type="user" size={avi} />
-            )}
-
-            <Text
-              emoji
-              style={[
-                text,
-                a.font_semi_bold,
-                a.leading_tight,
-                t.atoms.text_contrast_medium,
-                {paddingRight: 3},
-              ]}>
-              {desc.name}
-            </Text>
-          </View>
-        )}
-      </Button>
 
       {!disableDetailsDialog && (
         <ModerationDetailsDialog control={control} modcause={cause} />
@@ -154,10 +95,19 @@ export function Label({
 export type LabelBaseProps = {
   label: string
   onPress: () => void
+  disabled?: boolean
   noBg?: boolean
+  icon?: React.ReactNode
 } & CommonProps
 
-export function LabelBase({label, onPress, size = 'sm', noBg}: LabelBaseProps) {
+export function LabelBase({
+  label,
+  onPress,
+  disabled,
+  size = 'sm',
+  noBg,
+  icon,
+}: LabelBaseProps) {
   const t = useTheme()
 
   const {outer, text} = useMemo(() => {
@@ -193,38 +143,39 @@ export function LabelBase({label, onPress, size = 'sm', noBg}: LabelBaseProps) {
   }, [t, size, noBg])
 
   return (
-    <>
+    <Button
-      <Button
+      disabled={disabled}
-        label={label}
+      label={label}
-        onPress={e => {
+      onPress={e => {
-          e.preventDefault()
+        e.preventDefault()
-          e.stopPropagation()
+        e.stopPropagation()
-          onPress()
+        onPress()
-        }}>
+      }}>
-        {({hovered, pressed}) => (
+      {({hovered, pressed}) => (
-          <View
+        <View
+          style={[
+            a.flex_row,
+            a.align_center,
+            a.rounded_full,
+            outer,
+            (hovered || pressed) && t.atoms.bg_contrast_50,
+          ]}>
+          {icon}
+
+          <Text
+            emoji
             style={[
-              a.flex_row,
+              text,
-              a.align_center,
+              a.font_semi_bold,
-              a.rounded_full,
+              a.leading_tight,
-              outer,
+              t.atoms.text_contrast_medium,
-              (hovered || pressed) && t.atoms.bg_contrast_50,
+              {paddingRight: 3},
             ]}>
-            <Text
+            {label}
-              emoji
+          </Text>
-              style={[
+        </View>
-                text,
+      )}
-                a.font_semi_bold,
+    </Button>
-                a.leading_tight,
-                t.atoms.text_contrast_medium,
-                {paddingRight: 3},
-              ]}>
-              {label}
-            </Text>
-          </View>
-        )}
-      </Button>
-    </>
   )
 }