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,
-              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,8 +143,8 @@ export function LabelBase({label, onPress, size = 'sm', noBg}: LabelBaseProps) {
   }, [t, size, noBg])
 
   return (
-    <>
     <Button
+      disabled={disabled}
       label={label}
       onPress={e => {
         e.preventDefault()
@@ -210,6 +160,8 @@ export function LabelBase({label, onPress, size = 'sm', noBg}: LabelBaseProps) {
             outer,
             (hovered || pressed) && t.atoms.bg_contrast_50,
           ]}>
+          {icon}
+
           <Text
             emoji
             style={[
@@ -224,7 +176,6 @@ export function LabelBase({label, onPress, size = 'sm', noBg}: LabelBaseProps) {
         </View>
       )}
     </Button>
-    </>
   )
 }