jake/sofa
1
Fork 0
mirror of https://github.com/jakejarvis/sofa.git synced 2026-08-29 01:35:39 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(native): inline department labels and dim age text in person detail screen

Browse Source 
- Move `getDepartmentLabels` helper inline as `departmentLabels` object inside the component so `t` from `useLingui()` is already in scope
- Wrap the birthday age/death annotation in a nested `<Text>` with `text-muted-foreground/60` to visually de-emphasise it
This commit is contained in:
jake
2026-03-19 11:57:27 -04:00
parent 8d1cc46875
commit 885b594a97
1 changed files with 10 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/native/src/app/person/[id].tsx
+10 -13
View File
@@ -44,20 +44,15 @@ function calculateAge(birthday: string, deathday?: string | null): number {
return age; return age;
} }
function getDepartmentLabels( export default function PersonDetailScreen() {
t: (strings: TemplateStringsArray, ...values: unknown[]) => string, const { t } = useLingui();
): Record<string, string> { const departmentLabels: Record<string, string> = {
return {
Acting: t`Actor`, Acting: t`Actor`,
Directing: t`Director`, Directing: t`Director`,
Writing: t`Writer`, Writing: t`Writer`,
Production: t`Producer`, Production: t`Producer`,
Editing: t`Editor`, Editing: t`Editor`,
}; };
}
export default function PersonDetailScreen() {
const { t } = useLingui();
const { id } = useLocalSearchParams<{ id: string }>(); const { id } = useLocalSearchParams<{ id: string }>();
const insets = useSafeAreaInsets(); const insets = useSafeAreaInsets();
const headerHeight = useHeaderHeight(); const headerHeight = useHeaderHeight();
@@ -250,7 +245,7 @@ export default function PersonDetailScreen() {
{person.knownForDepartment ? ( {person.knownForDepartment ? (
<View className="bg-secondary mt-2 rounded-full px-3 py-1"> <View className="bg-secondary mt-2 rounded-full px-3 py-1">
<Text className="text-muted-foreground text-xs tracking-wider uppercase"> <Text className="text-muted-foreground text-xs tracking-wider uppercase">
{getDepartmentLabels(t)[person.knownForDepartment] ?? person.knownForDepartment} {departmentLabels[person.knownForDepartment] ?? person.knownForDepartment}
</Text> </Text>
</View> </View>
) : null} ) : null}
@@ -262,10 +257,12 @@ export default function PersonDetailScreen() {
<ScaledIcon icon={IconCalendar} size={14} color={primaryColor} /> <ScaledIcon icon={IconCalendar} size={14} color={primaryColor} />
<Text selectable className="text-muted-foreground text-sm"> <Text selectable className="text-muted-foreground text-sm">
{formatDate(person.birthday)} {formatDate(person.birthday)}
{(() => { <Text className="text-muted-foreground/60 text-sm">
const age = calculateAge(person.birthday, person.deathday); {(() => {
return person.deathday ? ` (${t`died at ${age}`})` : ` (${t`age ${age}`})`; const age = calculateAge(person.birthday, person.deathday);
})()} return person.deathday ? ` (${t`died at ${age}`})` : ` (${t`age ${age}`})`;
})()}
</Text>
</Text> </Text>
</View> </View>
) : null} ) : null}