chrisandClaude Opus 5.5
864ab88627
Inspired by a dashboard design the user shared. - App: new palette and fonts, borderless rounded panels with soft shadows, a pink-to-blue gradient card for your own song (text and controls switch to white on it), flat cards for friends, a 'Hi Chris, welcome back' header, an outline bell, and a pink pill on the active tab. - Website: the same look, plus a wide-screen layout with a sidebar, the page in a rounded panel, and a right column with your profile, recent activity and recent plays. Phones keep the top bar and bottom tabs. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011Y2iUsKEWDuRGjK5FPmcUP
34 lines
1.6 KiB
TypeScript
34 lines
1.6 KiB
TypeScript
import { NativeTabs } from 'expo-router/unstable-native-tabs';
|
|
import { colors } from '@/lib/theme';
|
|
|
|
export default function TabsLayout() {
|
|
return (
|
|
<NativeTabs
|
|
backgroundColor={colors.bg}
|
|
// The active tab gets a pink pill, like the reference's sidebar.
|
|
indicatorColor={colors.accentSoft}
|
|
// Android defaults icons and labels to black, which vanishes on the dark bar.
|
|
iconColor={{ default: colors.muted, selected: colors.accent }}
|
|
labelStyle={{ default: { color: colors.muted }, selected: { color: colors.accent } }}
|
|
labelVisibilityMode="labeled"
|
|
tintColor={colors.accent}>
|
|
<NativeTabs.Trigger name="index">
|
|
<NativeTabs.Trigger.Label>Feed</NativeTabs.Trigger.Label>
|
|
<NativeTabs.Trigger.Icon sf={{ default: 'music.note.list', selected: 'music.note.list' }} md="queue_music" />
|
|
</NativeTabs.Trigger>
|
|
<NativeTabs.Trigger name="search">
|
|
<NativeTabs.Trigger.Label>Friends</NativeTabs.Trigger.Label>
|
|
<NativeTabs.Trigger.Icon sf="person.2" md="group" />
|
|
</NativeTabs.Trigger>
|
|
<NativeTabs.Trigger name="profile">
|
|
<NativeTabs.Trigger.Label>Profile</NativeTabs.Trigger.Label>
|
|
<NativeTabs.Trigger.Icon sf={{ default: 'person.crop.circle', selected: 'person.crop.circle.fill' }} md="account_circle" />
|
|
</NativeTabs.Trigger>
|
|
<NativeTabs.Trigger name="settings">
|
|
<NativeTabs.Trigger.Label>Settings</NativeTabs.Trigger.Label>
|
|
<NativeTabs.Trigger.Icon sf={{ default: 'gearshape', selected: 'gearshape.fill' }} md="settings" />
|
|
</NativeTabs.Trigger>
|
|
</NativeTabs>
|
|
);
|
|
}
|