Skip to content

Commit ecf1087

Browse files
gioboagioboa
committed
add Card example
1 parent 0a3a026 commit ecf1087

File tree

3 files changed

+180
-0
lines changed

3 files changed

+180
-0
lines changed

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

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { component$ } from '@builder.io/qwik';
2+
import { SfButton } from 'qwik-storefront-ui';
3+
4+
const cardDetails = [
5+
{
6+
image: '/images/card-3.png',
7+
title: 'Sip Sustainably: The Rise of Boxed Water',
8+
description:
9+
'Boxed water is a sustainable alternative to traditional plastic bottles, made from renewable resources.',
10+
button: 'Read more',
11+
},
12+
{
13+
image: '/images/card-2.png',
14+
title: 'Ride the Future: Exploring the Benefits of e-Bikes',
15+
description:
16+
'Eco-friendly, efficient, and fun modes of transportation that provide a range of benefits for riders and the environment.',
17+
button: 'Read more',
18+
},
19+
{
20+
image: '/images/card-1.png',
21+
title: 'Unleash the Ultimate Listening Experience',
22+
description:
23+
'Audiophile headphones offer unmatched sound quality and clarity, making them the go-to choice for music enthusiasts.',
24+
button: 'Read more',
25+
},
26+
];
27+
28+
export default component$(() => {
29+
return (
30+
<div class="flex flex-wrap gap-4 lg:gap-6 lg:flex-nowrap">
31+
{cardDetails.map(({ image, title, description, button }) => (
32+
<div
33+
key={title}
34+
class="flex flex-col min-w-[325px] max-w-[375px] lg:w-[496px] relative border border-neutral-200 rounded-md hover:shadow-xl"
35+
>
36+
<a
37+
class="absolute inset-0 z-1 focus-visible:outline focus-visible:outline-offset focus-visible:rounded-md"
38+
href="/"
39+
aria-label={title}
40+
/>
41+
<img
42+
src={image}
43+
alt={title}
44+
class="object-cover h-auto rounded-t-md aspect-video"
45+
/>
46+
<div class="flex flex-col items-start p-4 grow">
47+
<p class="font-medium typography-text-base">{title}</p>
48+
<p class="mt-1 mb-4 font-normal typography-text-sm text-neutral-700">
49+
{description}
50+
</p>
51+
<SfButton size="sm" variant="tertiary" class="relative mt-auto">
52+
{button}
53+
</SfButton>
54+
</div>
55+
</div>
56+
))}
57+
</div>
58+
);
59+
});

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

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import { component$ } from '@builder.io/qwik';
2+
import {
3+
SfButton,
4+
SfIconPackage,
5+
SfIconPublishedWithChanges,
6+
SfIconWarehouse,
7+
} from 'qwik-storefront-ui';
8+
9+
const cardDetails = [
10+
{
11+
icon: <SfIconPackage size="2xl" />,
12+
title: 'Free shipping',
13+
description:
14+
'Learn about our commitments to ethics, our team, our communities and more.',
15+
buttonText: 'Read more',
16+
isDisabled: false,
17+
},
18+
{
19+
icon: <SfIconWarehouse size="2xl" />,
20+
title: 'Click & Collect',
21+
description:
22+
'Learn about our commitments to ethics, our team, our communities and more.',
23+
buttonText: 'Read more',
24+
isDisabled: false,
25+
},
26+
{
27+
icon: <SfIconPublishedWithChanges size="2xl" />,
28+
title: 'Free 30-Day returns',
29+
description:
30+
'Learn about our commitments to ethics, our team, our communities and more.',
31+
buttonText: 'Read more',
32+
isDisabled: true,
33+
},
34+
];
35+
36+
export default component$(() => {
37+
return (
38+
<div class="flex flex-wrap gap-4 lg:gap-6 lg:flex-nowrap">
39+
{cardDetails.map(
40+
({ icon, title, description, buttonText, isDisabled }) => (
41+
<div
42+
key={title}
43+
class="flex flex-col min-w-[325px] w-[375px] lg:w-[496px] items-center"
44+
>
45+
<span class={{ 'text-disabled-900': isDisabled }}>{icon}</span>
46+
<div class="p-4 flex flex-col items-center">
47+
<p
48+
class={{
49+
'font-medium typography-text-base': true,
50+
'text-disabled-900': isDisabled,
51+
}}
52+
>
53+
{title}
54+
</p>
55+
<p
56+
class={{
57+
'mt-1 mb-4 font-normal typography-text-sm text-neutral-700 text-center':
58+
true,
59+
'text-disabled-700': isDisabled,
60+
}}
61+
>
62+
{description}
63+
</p>
64+
<SfButton
65+
size="sm"
66+
variant="secondary"
67+
disabled={isDisabled}
68+
class="mt-auto"
69+
>
70+
{buttonText}
71+
</SfButton>
72+
</div>
73+
</div>
74+
)
75+
)}
76+
</div>
77+
);
78+
});

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { component$ } from '@builder.io/qwik';
2+
3+
const categories = [
4+
{
5+
title: `Women`,
6+
image: '/images/women_category.png',
7+
},
8+
{
9+
title: `Men`,
10+
image: '/images/men_category.png',
11+
},
12+
{
13+
title: `Kid`,
14+
image: '/images/kid_category.png',
15+
},
16+
];
17+
export default component$(() => {
18+
return (
19+
<div class="flex flex-wrap gap-4 lg:gap-6 lg:flex-no-wrap">
20+
{categories.map(({ title, image }) => (
21+
<div class="relative min-w-[180px] flex-col max-w-[240px] group" key={title}>
22+
<a
23+
class="absolute w-full h-full z-1 focus-visible:outline focus-visible:outline-offset focus-visible:rounded-md"
24+
href="/"
25+
aria-label={title}
26+
/>
27+
<img
28+
class="rounded-full bg-neutral-100 group-hover:shadow-xl group-active:shadow-none"
29+
src={image}
30+
alt={title}
31+
width={240}
32+
height={240}
33+
/>
34+
<div class="flex justify-center">
35+
<a class="mt-4 font-semibold no-underline text-normal-900 typography-text-base group-hover:underline group-hover:text-primary-800 group-hover:font-normal group-active:text-primary-800 group-active:font-normal">
36+
{title}
37+
</a>
38+
</div>
39+
</div>
40+
))}
41+
</div>
42+
);
43+
});

0 commit comments

Comments
 (0)