-
Notifications
You must be signed in to change notification settings - Fork 354
/
TabBar.tsx
105 lines (100 loc) · 3 KB
/
TabBar.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
import { Localized } from "@fluent/react/compat";
import cn from "classnames";
import React, { FunctionComponent } from "react";
import { GQLSTORY_MODE } from "coral-framework/schema";
import CLASSES from "coral-stream/classes";
import { Icon, MatchMedia, Tab, TabBar } from "coral-ui/components/v2";
type TabValue = "COMMENTS" | "PROFILE" | "%future added value";
export interface Props {
activeTab: TabValue;
onTabClick: (tab: TabValue) => void;
showProfileTab: boolean;
showConfigureTab: boolean;
mode: "%future added value" | "COMMENTS" | "QA" | null;
}
const AppTabBar: FunctionComponent<Props> = (props) => {
return (
<TabBar
className={CLASSES.tabBar.$root}
activeTab={props.activeTab}
onTabClick={props.onTabClick}
variant="streamPrimary"
>
<Tab
className={cn(CLASSES.tabBar.comments, {
[CLASSES.tabBar.activeTab]: props.activeTab === "COMMENTS",
})}
tabID="COMMENTS"
variant="streamPrimary"
ariaLabel={props.mode === GQLSTORY_MODE.QA ? "Q&A" : "Comments"}
>
<MatchMedia gteWidth="sm">
{(matches) =>
matches ? (
props.mode === GQLSTORY_MODE.QA ? (
<Localized id="general-tabBar-qaTab">
<span>Q&A</span>
</Localized>
) : (
<Localized id="general-tabBar-commentsTab">
<span>Comments</span>
</Localized>
)
) : (
<Icon
aria-label={
props.mode === GQLSTORY_MODE.QA ? "Q&A" : "Comments"
}
>
mode_comment
</Icon>
)
}
</MatchMedia>
</Tab>
{props.showProfileTab && (
<Tab
className={cn(CLASSES.tabBar.myProfile, {
[CLASSES.tabBar.activeTab]: props.activeTab === "PROFILE",
})}
tabID="PROFILE"
variant="streamPrimary"
ariaLabel="My Profile"
>
<MatchMedia gteWidth="sm">
{(matches) =>
matches ? (
<Localized id="general-tabBar-myProfileTab">
<span>My Profile</span>
</Localized>
) : (
<Icon aria-label="My Profile">account_circle</Icon>
)
}
</MatchMedia>
</Tab>
)}
{props.showConfigureTab && (
<Tab
className={CLASSES.tabBar.configure}
tabID="CONFIGURE"
variant="streamPrimary"
ariaLabel="Configure"
>
<MatchMedia gteWidth="sm">
{(matches) =>
matches ? (
<Localized id="general-tabBar-configure">
<span>Configure</span>
</Localized>
) : (
<Icon aria-label="Configure">settings</Icon>
)
}
</MatchMedia>
</Tab>
)}
</TabBar>
);
};
export default AppTabBar;