Skip to content

Commit 3c2bc6b

Browse files
gioboagioboa
committed
add Breadcrumbs example
1 parent 4110c7a commit 3c2bc6b

File tree

3 files changed

+277
-0
lines changed

3 files changed

+277
-0
lines changed

‎apps/qwik-demo-app/src/routes/Breadcrumbs/Breadcrumbs/index.tsx‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import { component$, useSignal } from '@builder.io/qwik';
2+
import {
3+
SfButton,
4+
SfDropdown,
5+
SfIconMoreHoriz,
6+
SfLink,
7+
} from 'qwik-storefront-ui';
8+
9+
const breadcrumbs = [
10+
{
11+
name: 'Home',
12+
link: '/page',
13+
},
14+
{ name: 'Page 2', link: '/page' },
15+
{ name: 'Page 3', link: '/page' },
16+
{ name: 'Page 4', link: '/page' },
17+
{ name: 'Page 5', link: '/page' },
18+
];
19+
20+
export default component$(() => {
21+
const dropdownOpenedSignal = useSignal(false);
22+
23+
return (
24+
<nav class="inline-flex font-normal font-body typography-text-sm">
25+
<ol class="flex items-center w-auto leading-none group md:flex-wrap">
26+
<li class="flex items-center sm:hidden text-neutral-500">
27+
<SfDropdown
28+
open={dropdownOpenedSignal.value}
29+
// TODO check missing prop
30+
// strategy="absolute"
31+
// placement="bottom-start"
32+
onClose$={() => {
33+
dropdownOpenedSignal.value = false;
34+
}}
35+
>
36+
<div q:slot="trigger">
37+
<SfButton
38+
class="relative w-5 h-5 !p-0 rounded-sm outline-secondary-600 hover:bg-transparent active:bg-transparent"
39+
aria-label="More breadcrumbs"
40+
type="button"
41+
variant="tertiary"
42+
square
43+
onClick$={() => {
44+
dropdownOpenedSignal.value = !dropdownOpenedSignal.value;
45+
}}
46+
>
47+
<div q:slot="prefix">
48+
<SfIconMoreHoriz
49+
size="sm"
50+
class="text-neutral-500 hover:text-primary-700 active:text-primary-800 active:bg-transparent"
51+
/>
52+
</div>
53+
</SfButton>
54+
</div>
55+
<div class="px-4 py-2 rounded-md shadow-md border-neutral-100">
56+
{breadcrumbs.map(({ name, link }) => (
57+
<li class="py-2 last-of-type:hidden" key={name}>
58+
<SfLink
59+
href={link}
60+
variant="secondary"
61+
class="leading-5 no-underline text-inherit hover:underline active:underline whitespace-nowrap outline-secondary-600"
62+
>
63+
{name}
64+
</SfLink>
65+
</li>
66+
))}
67+
</div>
68+
</SfDropdown>
69+
</li>
70+
{breadcrumbs.map((item) => (
71+
<li
72+
class="peer hidden sm:flex peer-[:nth-of-type(even)]:before:content-['/'] peer-[:nth-of-type(even)]:before:px-2 peer-[:nth-of-type(even)]:before:leading-5 last-of-type:flex last-of-type:before:font-normal last-of-type:before:text-neutral-500 text-neutral-500 last-of-type:text-neutral-900 last-of-type:font-medium"
73+
key={item.name}
74+
>
75+
<SfLink
76+
href={item.link}
77+
variant="secondary"
78+
class="leading-5 no-underline hover:underline active:underline whitespace-nowrap outline-secondary-600 text-inherit"
79+
>
80+
{item.name}
81+
</SfLink>
82+
</li>
83+
))}
84+
</ol>
85+
</nav>
86+
);
87+
});

‎apps/qwik-demo-app/src/routes/Breadcrumbs/BreadcrumbsSeparator/index.tsx‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import { component$, useSignal } from '@builder.io/qwik';
2+
import {
3+
SfButton,
4+
SfDropdown,
5+
SfIconChevronRight,
6+
SfIconMoreHoriz,
7+
SfLink,
8+
} from 'qwik-storefront-ui';
9+
10+
const breadcrumbs = [
11+
{
12+
name: 'Home',
13+
link: '/page',
14+
},
15+
{ name: 'Page 2', link: '/page' },
16+
{ name: 'Page 3', link: '/page' },
17+
{ name: 'Page 4', link: '/page' },
18+
{ name: 'Page 5', link: '/page' },
19+
];
20+
21+
export default component$(() => {
22+
const dropdownOpenedSignal = useSignal(false);
23+
24+
return (
25+
<nav class="flex items-center text-sm font-normal font-body">
26+
<ol class="flex w-auto leading-none group md:flex-wrap">
27+
<li class="flex items-center sm:hidden text-neutral-500">
28+
<SfDropdown
29+
open={dropdownOpenedSignal.value}
30+
// TODO check missing props
31+
// strategy="absolute"
32+
// placement="bottom-start"
33+
onClose$={() => {
34+
dropdownOpenedSignal.value = false;
35+
}}
36+
>
37+
<div q:slot="trigger">
38+
<SfButton
39+
class="relative w-5 h-5 !p-0 rounded-sm outline-secondary-600 hover:bg-transparent active:bg-transparent"
40+
aria-label="More breadcrumbs"
41+
type="button"
42+
variant="tertiary"
43+
square
44+
onClick$={() => {
45+
dropdownOpenedSignal.value = !dropdownOpenedSignal.value;
46+
}}
47+
>
48+
<div q:slot="prefix">
49+
<SfIconMoreHoriz
50+
size="sm"
51+
class="text-neutral-500 hover:text-primary-700 active:text-primary-800 active:bg-transparent"
52+
/>
53+
</div>
54+
</SfButton>
55+
</div>
56+
<div class="px-4 py-2 rounded-md shadow-md border-neutral-100">
57+
{breadcrumbs.map(({ name, link }) => (
58+
<li class="py-2 last-of-type:hidden" key={name}>
59+
<SfLink
60+
href={link}
61+
variant="secondary"
62+
class="leading-5 no-underline text-inherit hover:underline active:underline whitespace-nowrap outline-secondary-600"
63+
>
64+
{name}
65+
</SfLink>
66+
</li>
67+
))}
68+
</div>
69+
</SfDropdown>
70+
</li>
71+
{breadcrumbs.map((item, index) => (
72+
<li
73+
data-icon="url('@assets/chevron_right.svg')"
74+
class="hidden peer sm:flex text-neutral-500 last-of-type:flex last-of-type:text-neutral-900 last-of-type:font-medium"
75+
key={item.name}
76+
>
77+
{index !== 0 ? (
78+
<SfIconChevronRight size="sm" class="mx-0.5 text-disabled-500" />
79+
) : null}
80+
<SfLink
81+
href={item.link}
82+
variant="secondary"
83+
class="leading-5 no-underline hover:underline active:underline whitespace-nowrap outline-secondary-600 text-inherit"
84+
>
85+
{item.name}
86+
</SfLink>
87+
</li>
88+
))}
89+
</ol>
90+
</nav>
91+
);
92+
});

‎apps/qwik-demo-app/src/routes/Breadcrumbs/BreadcrumbsWithIcon/index.tsx‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import { component$, useSignal } from '@builder.io/qwik';
2+
import {
3+
SfButton,
4+
SfDropdown,
5+
SfIconHome,
6+
SfIconMoreHoriz,
7+
SfLink,
8+
} from 'qwik-storefront-ui';
9+
10+
const breadcrumbs = [
11+
{
12+
name: 'Home',
13+
link: '/page',
14+
},
15+
{ name: 'Page 2', link: '/page' },
16+
{ name: 'Page 3', link: '/page' },
17+
{ name: 'Page 4', link: '/page' },
18+
{ name: 'Page 5', link: '/page' },
19+
];
20+
21+
export default component$(() => {
22+
const dropdownOpenedSignal = useSignal(false);
23+
24+
return (
25+
<nav class="inline-flex text-sm font-normal font-body">
26+
<ol class="flex items-center w-auto leading-none group md:flex-wrap">
27+
<li class="flex sm:hidden">
28+
<SfDropdown
29+
open={dropdownOpenedSignal.value}
30+
// TODO check missing props
31+
// strategy="absolute"
32+
// placement="bottom-start"
33+
onClose$={() => {
34+
dropdownOpenedSignal.value = false;
35+
}}
36+
>
37+
<div q:slot="trigger">
38+
<SfButton
39+
class="relative w-5 h-5 !p-0 rounded-sm outline-secondary-600 hover:bg-transparent active:bg-transparent"
40+
aria-label="More breadcrumbs"
41+
type="button"
42+
variant="tertiary"
43+
square
44+
onClick$={() => {
45+
dropdownOpenedSignal.value = !dropdownOpenedSignal.value;
46+
}}
47+
>
48+
<div q:slot="prefix">
49+
<SfIconMoreHoriz
50+
size="sm"
51+
class="text-neutral-500 hover:text-primary-700 active:text-primary-800 active:bg-transparent"
52+
/>
53+
</div>
54+
</SfButton>
55+
</div>
56+
<div class="px-4 py-2 rounded-md shadow-md border-neutral-100">
57+
{breadcrumbs.map(({ name, link }) => (
58+
<li class="py-2 last-of-type:hidden" key={name}>
59+
<SfLink
60+
href={link}
61+
variant="secondary"
62+
class="leading-5 no-underline text-inherit hover:underline active:underline whitespace-nowrap outline-secondary-600"
63+
>
64+
{name}
65+
</SfLink>
66+
</li>
67+
))}
68+
</div>
69+
</SfDropdown>
70+
</li>
71+
{breadcrumbs.map((item, index) => (
72+
<li
73+
class="peer hidden sm:flex peer-[:nth-of-type(even)]:before:content-['/'] peer-[:nth-of-type(even)]:before:px-2 peer-[:nth-of-type(even)]:before:leading-5 last-of-type:flex last-of-type:before:font-normal last-of-type:before:text-neutral-500 last-of-type:text-neutral-900 last-of-type:font-medium"
74+
key={item.name}
75+
>
76+
{index === 0 ? (
77+
<SfLink
78+
href={item.link}
79+
variant="secondary"
80+
class="inline-flex leading-5 no-underline hover:underline active:underline whitespace-nowrap outline-secondary-600 text-neutral-500"
81+
>
82+
<SfIconHome size="sm" />
83+
</SfLink>
84+
) : (
85+
<SfLink
86+
href={item.link}
87+
variant="secondary"
88+
class="leading-5 no-underline hover:underline active:underline whitespace-nowrap outline-secondary-600"
89+
>
90+
{item.name}
91+
</SfLink>
92+
)}
93+
</li>
94+
))}
95+
</ol>
96+
</nav>
97+
);
98+
});

0 commit comments

Comments
 (0)