1
- import React from "react" ;
1
+ import React from "react"
2
2
import { TopNavigation } from "@atlaskit/page-layout"
3
- import { AtlassianNavigation , CustomProductHome , PrimaryButton , Profile } from "@atlaskit/atlassian-navigation"
3
+ import {
4
+ AtlassianNavigation ,
5
+ CustomProductHome ,
6
+ PrimaryButton ,
7
+ Profile ,
8
+ } from "@atlaskit/atlassian-navigation"
4
9
import { useNavigate } from "react-router"
5
- import ThemeSwitch from "@linked-planet/ui-kit-ts/components/themeswitch"
6
- import { LocaleDropDown } from "@linked-planet/ui-kit-ts"
10
+ import { LocaleDropDown , ThemeSwitch } from "@linked-planet/ui-kit-ts"
7
11
export const ProfileIcon = ( ) => {
8
12
return (
9
13
< img
10
14
src = "./images/github-logo.png"
11
- style = { {
15
+ style = { {
12
16
borderRadius : "50%" ,
13
17
width : 32 ,
14
- height : 32
15
- }
16
- }
18
+ height : 32 ,
19
+ } }
17
20
/>
18
21
)
19
22
}
20
23
21
- function ShowcaseTopNavigation ( ) {
24
+ function ShowcaseTopNavigation ( ) {
22
25
const navigation = useNavigate ( )
23
26
24
27
return (
25
28
< TopNavigation isFixed >
26
29
< AtlassianNavigation
27
30
label = ""
28
- primaryItems = {
29
- [
30
- < PrimaryButton key = { 0 } onClick = { ( ) => navigation ( "/intro" ) } >
31
- < span > Intro</ span >
32
- </ PrimaryButton > ,
33
- < PrimaryButton key = { 1 } onClick = { ( ) => navigation ( "/wrappers" ) } >
34
- < span > Wrappers</ span >
35
- </ PrimaryButton > ,
36
- < PrimaryButton key = { 2 } onClick = { ( ) => navigation ( "/redux" ) } >
37
- < span > Redux</ span >
38
- </ PrimaryButton > ,
39
- < PrimaryButton key = { 3 } onClick = { ( ) => navigation ( "/query" ) } >
40
- < span > React-Query</ span >
41
- </ PrimaryButton > ,
42
- < div key = { 4 } style = { { display : "flex" , justifyContent : "center" , alignItems : "center" } } >
43
- < LocaleDropDown />
44
- </ div > ,
45
- ]
46
- }
47
- renderAppSwitcher = { ( ) => < ThemeSwitch /> }
48
- renderProductHome = { ( ) => < CustomProductHome siteTitle = "UI-Kit-TS" iconUrl = "./images/logo.png" logoAlt = ""
49
- onClick = { ( ) => navigation ( "/utils" ) }
50
- logoUrl = "images/logo.png" iconAlt = "" /> }
51
- renderProfile = { ( ) => < Profile tooltip = "" href = "https://github.com/linked-planet/ui-kit-ts" target = "_blank" icon = { < ProfileIcon /> } /> }
31
+ primaryItems = { [
32
+ < PrimaryButton key = { 0 } onClick = { ( ) => navigation ( "/intro" ) } >
33
+ < span > Intro</ span >
34
+ </ PrimaryButton > ,
35
+ < PrimaryButton
36
+ key = { 1 }
37
+ onClick = { ( ) => navigation ( "/wrappers" ) }
38
+ >
39
+ < span > Wrappers</ span >
40
+ </ PrimaryButton > ,
41
+ < PrimaryButton key = { 2 } onClick = { ( ) => navigation ( "/redux" ) } >
42
+ < span > Redux</ span >
43
+ </ PrimaryButton > ,
44
+ < PrimaryButton key = { 3 } onClick = { ( ) => navigation ( "/query" ) } >
45
+ < span > React-Query</ span >
46
+ </ PrimaryButton > ,
47
+ < div
48
+ key = { 4 }
49
+ style = { {
50
+ display : "flex" ,
51
+ justifyContent : "center" ,
52
+ alignItems : "center" ,
53
+ } }
54
+ >
55
+ < LocaleDropDown />
56
+ </ div > ,
57
+ ] }
58
+ renderAppSwitcher = { ( ) => < ThemeSwitch /> }
59
+ renderProductHome = { ( ) => (
60
+ < CustomProductHome
61
+ siteTitle = "UI-Kit-TS"
62
+ iconUrl = "./images/logo.png"
63
+ logoAlt = ""
64
+ onClick = { ( ) => navigation ( "/utils" ) }
65
+ logoUrl = "images/logo.png"
66
+ iconAlt = ""
67
+ />
68
+ ) }
69
+ renderProfile = { ( ) => (
70
+ < Profile
71
+ tooltip = ""
72
+ href = "https://github.com/linked-planet/ui-kit-ts"
73
+ target = "_blank"
74
+ icon = { < ProfileIcon /> }
75
+ />
76
+ ) }
52
77
/>
53
78
</ TopNavigation >
54
79
)
55
80
}
56
81
57
- export default ShowcaseTopNavigation ;
82
+ export default ShowcaseTopNavigation
0 commit comments