AaronPo/the-biergarten-app
1
0
Fork 0
mirror of https://github.com/aaronpo97/the-biergarten-app.git synced 2026-10-15 01:54:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Address PR #310 review feedback on the public profile page

Browse Source
This commit is contained in:
Aaron Po
2026-09-13 01:05:01 -04:00
parent 81717eddbf
commit 132f93cc87
12 changed files with 127 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
web/frontend/app/features/users/components/profile/ProfileTabs.stories.tsx
View File

@@ -22,13 +22,19 @@ const meta = {
export default meta;
type Story = StoryObj<typeof meta>;
const panels = {
activity: <p>Activity panel</p>,
following: <p>Following panel</p>,
liked: <p>Liked panel</p>,
};
const ControlledTabs = () => {
const [activeTab, setActiveTab] = useState<ProfileTab>('activity');
return <ProfileTabs activeTab={activeTab} onChange={setActiveTab} />;
return <ProfileTabs activeTab={activeTab} onChange={setActiveTab} panels={panels} />;
};
export const Default: Story = {
args: { activeTab: 'activity', onChange: fn() },
args: { activeTab: 'activity', onChange: fn(), panels },
render: () => <ControlledTabs />,
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
@@ -36,5 +42,6 @@ export const Default: Story = {
await expect(followingTab).toHaveAttribute('aria-selected', 'false');
await userEvent.click(followingTab);
await expect(followingTab).toHaveAttribute('aria-selected', 'true');
await expect(canvas.getByText('Following panel')).toBeInTheDocument();
},
};

11
web/frontend/app/features/users/components/profile/ProfileTabs.tsx
View File

@@ -1,4 +1,5 @@
import { Tab, TabGroup, TabList } from '@headlessui/react';
import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react';
import type { ReactNode } from 'react';
export type ProfileTab = 'activity' | 'following' | 'liked';
@@ -11,9 +12,10 @@ const TABS: { id: ProfileTab; label: string }[] = [
interface ProfileTabsProps {
activeTab: ProfileTab;
onChange: (tab: ProfileTab) => void;
panels: Record<ProfileTab, ReactNode>;
}
const ProfileTabs = ({ activeTab, onChange }: ProfileTabsProps) => {
const ProfileTabs = ({ activeTab, onChange, panels }: ProfileTabsProps) => {
const selectedIndex = TABS.findIndex((tab) => tab.id === activeTab);
return (
@@ -28,6 +30,11 @@ const ProfileTabs = ({ activeTab, onChange }: ProfileTabsProps) => {
</Tab>
))}
</TabList>
<TabPanels className="mt-5">
{TABS.map((tab) => (
<TabPanel key={tab.id}>{panels[tab.id]}</TabPanel>
))}
</TabPanels>
</TabGroup>
);
};