@codesinger0/shared-components 1.0.6 → 1.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { RoundButton } from '../RoundButton.jsx'
|
|
3
|
+
import { motion } from 'framer-motion'
|
|
4
|
+
|
|
5
|
+
const LargeItemCard = ({
|
|
6
|
+
imageUrl,
|
|
7
|
+
title,
|
|
8
|
+
subtitle,
|
|
9
|
+
description,
|
|
10
|
+
buttonLabel,
|
|
11
|
+
onButtonClick,
|
|
12
|
+
reverse = false,
|
|
13
|
+
price,
|
|
14
|
+
discountPrice,
|
|
15
|
+
icons = []
|
|
16
|
+
}) => {
|
|
17
|
+
return (
|
|
18
|
+
<section className="relative w-full overflow-visible py-16 px-4">
|
|
19
|
+
{/* Background Section with Text Content */}
|
|
20
|
+
<div className="glass-card relative" style={{ minHeight: '48vh', overflow: 'visible' }}>
|
|
21
|
+
<div className="max-w-7xl mx-auto px-6 pt-16">
|
|
22
|
+
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
|
23
|
+
|
|
24
|
+
{/* Text Content */}
|
|
25
|
+
<div
|
|
26
|
+
className={`text-center lg:text-right space-y-6 ${reverse ? 'lg:order-2' : 'lg:order-1'}`}
|
|
27
|
+
dir="rtl"
|
|
28
|
+
>
|
|
29
|
+
<h2 className="title">{title}</h2>
|
|
30
|
+
<h3 className="subtitle">{subtitle}</h3>
|
|
31
|
+
<p className="content-text max-w-md mx-auto lg:mx-0">{description}</p>
|
|
32
|
+
|
|
33
|
+
{/* Price Section */}
|
|
34
|
+
{price && (
|
|
35
|
+
<div className="text-center lg:text-right mt-4">
|
|
36
|
+
{discountPrice && discountPrice < price ? (
|
|
37
|
+
<div className="space-y-1">
|
|
38
|
+
<div className="flex items-center justify-center lg:justify-start gap-2">
|
|
39
|
+
<span className="text-2xl font-bold text-price">
|
|
40
|
+
₪{discountPrice}
|
|
41
|
+
</span>
|
|
42
|
+
<span className="text-sm content-text line-through">
|
|
43
|
+
₪{price}
|
|
44
|
+
</span>
|
|
45
|
+
<span className="bg-red-500 text-white px-2 py-1 rounded-full text-xs font-bold">
|
|
46
|
+
-{Math.round(((price - discountPrice) / price) * 100)}%
|
|
47
|
+
</span>
|
|
48
|
+
</div>
|
|
49
|
+
<div className="text-xs content-text font-medium">
|
|
50
|
+
חיסכון של ₪{price - discountPrice}
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
) : (
|
|
54
|
+
<span className="text-2xl font-bold text-price">
|
|
55
|
+
₪{price}
|
|
56
|
+
</span>
|
|
57
|
+
)}
|
|
58
|
+
</div>
|
|
59
|
+
)}
|
|
60
|
+
|
|
61
|
+
<div className="py-4">
|
|
62
|
+
<RoundButton variant="primary" onClick={onButtonClick}>
|
|
63
|
+
{buttonLabel}
|
|
64
|
+
</RoundButton>
|
|
65
|
+
</div>
|
|
66
|
+
|
|
67
|
+
{/* Icons Section */}
|
|
68
|
+
{icons.length > 0 && (
|
|
69
|
+
<div className="flex flex-wrap justify-center lg:justify-start gap-10 mt-6">
|
|
70
|
+
{icons.map((icon, index) => (
|
|
71
|
+
<div key={index} className="flex flex-col items-center justify-center content-text rounded-lg shadow-sm pb-10">
|
|
72
|
+
{icon}
|
|
73
|
+
</div>
|
|
74
|
+
))}
|
|
75
|
+
</div>
|
|
76
|
+
)}
|
|
77
|
+
</div>
|
|
78
|
+
|
|
79
|
+
{/* Space for image positioning (desktop uses floating image, keep spacer) */}
|
|
80
|
+
<div className={`hidden lg:block relative lg:h-full ${reverse ? 'lg:order-1' : 'lg:order-2'}`}>
|
|
81
|
+
{/* reserved for absolutely positioned image on desktop */}
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
|
|
85
|
+
</div>
|
|
86
|
+
|
|
87
|
+
{/* full-width mobile image */}
|
|
88
|
+
<div className="block lg:hidden mt-8 w-full">
|
|
89
|
+
<motion.div
|
|
90
|
+
key={'image'}
|
|
91
|
+
initial={{ opacity: 0, y: 50 }}
|
|
92
|
+
whileInView={{ opacity: 1, y: 0 }}
|
|
93
|
+
viewport={{ once: true }}
|
|
94
|
+
transition={{ delay: 1 * 0.5 }}
|
|
95
|
+
className="h-full"
|
|
96
|
+
>
|
|
97
|
+
<img
|
|
98
|
+
src={imageUrl}
|
|
99
|
+
alt={title}
|
|
100
|
+
className="w-full h-auto rounded-none shadow-2xls"
|
|
101
|
+
/>
|
|
102
|
+
</motion.div>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
|
|
106
|
+
{/* Floating Image Container (desktop only, unchanged behavior) */}
|
|
107
|
+
<div
|
|
108
|
+
className={`hidden lg:block absolute transform -translate-x-1/2 left-1/2 lg:top-8 ${reverse
|
|
109
|
+
? 'lg:left-16 lg:transform-none lg:translate-x-0'
|
|
110
|
+
: 'lg:left-auto lg:right-16 lg:transform-none lg:translate-x-0'
|
|
111
|
+
}`}
|
|
112
|
+
style={{ zIndex: 10, width: '600px', maxWidth: '90vw' }}
|
|
113
|
+
>
|
|
114
|
+
<div className="relative">
|
|
115
|
+
<motion.div
|
|
116
|
+
key={'image'}
|
|
117
|
+
initial={{ opacity: 0, x: reverse ? -50 : 50 }}
|
|
118
|
+
whileInView={{ opacity: 1, x: 0 }}
|
|
119
|
+
viewport={{ once: true }}
|
|
120
|
+
transition={{ delay: 1 * 0.5 }}
|
|
121
|
+
className="h-full"
|
|
122
|
+
>
|
|
123
|
+
<img
|
|
124
|
+
src={imageUrl}
|
|
125
|
+
alt={title}
|
|
126
|
+
className="w-auto h-auto max-h-[50vh] rounded-lg shadow-2xl border border-primary"
|
|
127
|
+
/>
|
|
128
|
+
</motion.div>
|
|
129
|
+
</div>
|
|
130
|
+
</div>
|
|
131
|
+
</section>
|
|
132
|
+
);
|
|
133
|
+
};
|
|
134
|
+
|
|
135
|
+
export default LargeItemCard;
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
const RoundButton = ({
|
|
4
|
+
children,
|
|
5
|
+
onClick,
|
|
6
|
+
variant = 'primary',
|
|
7
|
+
size = 'medium',
|
|
8
|
+
className = '',
|
|
9
|
+
...props
|
|
10
|
+
}) => {
|
|
11
|
+
const baseClasses = 'rounded-full font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2';
|
|
12
|
+
|
|
13
|
+
const variants = {
|
|
14
|
+
primary: 'btn-primary',
|
|
15
|
+
secondary: 'btn-secondary',
|
|
16
|
+
outline: 'border border-gray-300 text-main hover:ring-2 hover:ring-gray-500 hover:opacity-80'
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
const sizes = {
|
|
20
|
+
xs: 'px-3 py-1.5 text-sm',
|
|
21
|
+
small: 'px-4 py-2 text-sm',
|
|
22
|
+
medium: 'px-6 py-3 text-base',
|
|
23
|
+
large: 'px-8 py-4 text-lg'
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
const buttonClasses = `${baseClasses} ${variants[variant]} ${sizes[size]} ${className}`;
|
|
27
|
+
|
|
28
|
+
return (
|
|
29
|
+
<button
|
|
30
|
+
className={buttonClasses}
|
|
31
|
+
onClick={(e) => {
|
|
32
|
+
onClick?.(e);
|
|
33
|
+
// remove focus immediately after click
|
|
34
|
+
e.currentTarget.blur();
|
|
35
|
+
}}
|
|
36
|
+
dir="rtl"
|
|
37
|
+
{...props}
|
|
38
|
+
>
|
|
39
|
+
{children}
|
|
40
|
+
</button>
|
|
41
|
+
);
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
export default RoundButton;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@codesinger0/shared-components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.7",
|
|
4
4
|
"description": "Shared React components for customer projects",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"files": [
|
|
@@ -11,7 +11,8 @@
|
|
|
11
11
|
},
|
|
12
12
|
"peerDependencies": {
|
|
13
13
|
"react": ">=18.0.0",
|
|
14
|
-
"lucide-react": ">=0.263.1"
|
|
14
|
+
"lucide-react": ">=0.263.1",
|
|
15
|
+
"framer-motion": ">=12.23.12"
|
|
15
16
|
},
|
|
16
17
|
"repository": {
|
|
17
18
|
"type": "git",
|