@codesinger0/shared-components 1.1.64 → 1.1.66

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.
Files changed (5) hide show
  1. package/dist/components/Hero.jsx +7 -1
  2. package/dist/components/IntroSection.jsx +22 -22
  3. package/dist/components/QAAccordion.jsx +15 -6
  4. package/dist/components/elements/FixedWidthHeroVideo.jsx +7 -2
  5. package/package.json +1 -1
package/dist/components/Hero.jsx CHANGED
@@ -7,6 +7,8 @@ const Hero = ({
7
7
  // Media props
8
8
  mediaType = 'image', // 'video' or 'image'
9
9
  videoId = '', // YouTube video ID
10
+ useYoutube = true, // Use YouTube or direct video
11
+ videoUrl = '', // Direct video URL (when useYoutube is false)
10
12
  imageUrl = '', // Image URL for static background
11
13
  mediaHeight = '70vh', // Height of the media section
12
14
 
@@ -53,7 +55,11 @@ const Hero = ({
53
55
  {/* Media Background Container */}
54
56
  <div className="absolute inset-0 w-full h-full" aria-hidden="true">
55
57
  {mediaType === 'video' ? (
56
- <FixedWidthHeroVideo useYoutube={true} youtubeVideoId={videoId} />
58
+ <FixedWidthHeroVideo
59
+ useYoutube={useYoutube}
60
+ youtubeVideoId={videoId}
61
+ videoUrl={videoUrl}
62
+ />
57
63
  ) : (
58
64
  <div
59
65
  className="absolute inset-0 bg-cover bg-center bg-no-repeat"
package/dist/components/IntroSection.jsx CHANGED
@@ -20,15 +20,7 @@ const IntroSection = ({
20
20
  {introImage ? (
21
21
  /* Layout with image */
22
22
  <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center">
23
- {/* Text Content */}
24
- <div className="text-center lg:text-right order-2 lg:order-1">
25
- <h2 className={introTitleClass + " mb-6"}>
26
- {introTitle}
27
- </h2>
28
- <p className={introContentClass + " leading-relaxed"} style={{ whiteSpace: 'pre-line' }}>
29
- {introContent}
30
- </p>
31
- </div>
23
+
32
24
 
33
25
  {/* Image */}
34
26
  <motion.div
@@ -37,22 +29,30 @@ const IntroSection = ({
37
29
  whileInView={{ opacity: 1, x: 0 }}
38
30
  viewport={{ once: true }}
39
31
  transition={{ delay: 1 * 0.5 }}
40
- className="h-full"
32
+ className="flex items-center justify-center lg:justify-end"
41
33
  >
42
- <div className="order-1 lg:order-2 flex justify-center lg:justify-end">
43
- <div className="w-full max-w-md lg:max-w-lg">
44
- <img
45
- src={introImage}
46
- alt={introTitle || "Introduction image"}
47
- className="w-full h-auto rounded-lg shadow-lg object-cover"
48
- onError={(e) => {
49
- e.target.style.display = 'none';
50
- console.warn('Failed to load intro image:', introImage);
51
- }}
52
- />
53
- </div>
34
+ <div className="w-full max-w-md lg:max-w-lg">
35
+ <img
36
+ src={introImage}
37
+ alt={introTitle || "Introduction image"}
38
+ className="w-full h-auto rounded-lg shadow-lg object-cover"
39
+ onError={(e) => {
40
+ e.target.style.display = 'none';
41
+ console.warn('Failed to load intro image:', introImage);
42
+ }}
43
+ />
54
44
  </div>
55
45
  </motion.div>
46
+
47
+ {/* Text Content */}
48
+ <div className="text-center lg:text-right">
49
+ <h2 className={introTitleClass + " mb-6"}>
50
+ {introTitle}
51
+ </h2>
52
+ <p className={introContentClass + " leading-relaxed"} style={{ whiteSpace: 'pre-line' }}>
53
+ {introContent}
54
+ </p>
55
+ </div>
56
56
  </div>
57
57
  ) : (
58
58
  /* Text only layout (original) */
package/dist/components/QAAccordion.jsx CHANGED
@@ -7,7 +7,11 @@ const QAAccordion = ({
7
7
  qaItems = [],
8
8
  onClickCta = () => { },
9
9
  showCTA = true,
10
- className = ""
10
+ className = "",
11
+ backgroundColor = "bg-main",
12
+ cardBackgroundColor = "bg-white",
13
+ textColor = "text-gray-800",
14
+ answerTextColor = "text-gray-700"
11
15
  }) => {
12
16
  const [openIndex, setOpenIndex] = useState(null);
13
17
 
@@ -70,7 +74,7 @@ const QAAccordion = ({
70
74
  const items = qaItems.length > 0 ? qaItems : defaultQAItems;
71
75
 
72
76
  return (
73
- <section className={`py-16 px-4 bg-main ${className}`} dir="rtl">
77
+ <section className={`py-16 px-4 ${backgroundColor} ${className}`} dir="rtl">
74
78
  <div className="max-w-4xl mx-auto">
75
79
  {/* Header */}
76
80
  <div className="text-center mb-12">
@@ -83,14 +87,19 @@ const QAAccordion = ({
83
87
  {items.map((item, index) => (
84
88
  <div
85
89
  key={index}
86
- className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden"
90
+ className={`${cardBackgroundColor} rounded-xl shadow-sm border border-gray-100 overflow-hidden`}
87
91
  >
88
92
  {/* Question Header */}
89
93
  <button
90
94
  onClick={() => toggleAccordion(index)}
91
- className="w-full px-6 py-5 text-right flex items-center justify-between hover:bg-gray-50 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-20"
95
+ className="w-full px-6 py-5 text-right flex items-center justify-between hover:bg-gray-50 transition-colors duration-200 focus:outline-none"
96
+ style={{
97
+ '--tw-ring-color': 'color-mix(in srgb, var(--primary) 20%, transparent)'
98
+ }}
99
+ onFocus={(e) => e.currentTarget.style.boxShadow = '0 0 0 2px var(--tw-ring-color)'}
100
+ onBlur={(e) => e.currentTarget.style.boxShadow = ''}
92
101
  >
93
- <span className="subtitle font-semibold text-gray-800 flex-1">
102
+ <span className={`subtitle font-semibold ${textColor} flex-1`}>
94
103
  {item.question}
95
104
  </span>
96
105
 
@@ -171,7 +180,7 @@ const QAAccordion = ({
171
180
  delay: 0.1
172
181
  }
173
182
  }}
174
- className="content-text text-gray-700 leading-relaxed pt-4"
183
+ className={`content-text ${answerTextColor} leading-relaxed pt-4`}
175
184
  style={{ whiteSpace: 'pre-line' }}
176
185
  >
177
186
  {item.answer}
package/dist/components/elements/FixedWidthHeroVideo.jsx CHANGED
@@ -1,6 +1,10 @@
1
1
  import React, { useState, useEffect } from 'react';
2
2
 
3
- const FixedWidthHeroVideo = ({ youtubeVideoId = "dQw4w9WgXcQ", useYoutube = false }) => {
3
+ const FixedWidthHeroVideo = ({
4
+ youtubeVideoId = "dQw4w9WgXcQ",
5
+ useYoutube = false,
6
+ videoUrl = "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
7
+ }) => {
4
8
  const [viewportSize, setViewportSize] = useState({ width: 0, height: 0 });
5
9
 
6
10
  useEffect(() => {
@@ -56,7 +60,7 @@ const FixedWidthHeroVideo = ({ youtubeVideoId = "dQw4w9WgXcQ", useYoutube = fals
56
60
  loop
57
61
  playsInline
58
62
  >
59
- <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
63
+ <source src={videoUrl} type="video/mp4" />
60
64
  Your browser does not support the video tag.
61
65
  </video>
62
66
  )}
@@ -81,6 +85,7 @@ const FixedWidthHeroVideo = ({ youtubeVideoId = "dQw4w9WgXcQ", useYoutube = fals
81
85
 
82
86
  // Usage examples:
83
87
  // <FixedWidthHeroVideo useYoutube={false} />
88
+ // <FixedWidthHeroVideo useYoutube={false} videoUrl="path/to/your/video.mp4" />
84
89
  // <FixedWidthHeroVideo useYoutube={true} youtubeVideoId="dQw4w9WgXcQ" />
85
90
 
86
91
  export default FixedWidthHeroVideo;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@codesinger0/shared-components",
3
- "version": "1.1.64",
3
+ "version": "1.1.66",
4
4
  "description": "Shared React components for customer projects",
5
5
  "main": "dist/index.js",
6
6
  "files": [