@clikvn/showroom-visualizer 0.5.0 → 0.5.1-dev-02

package/example/src/components/CustomComponents/FloorplanComponents.tsx

@@ -0,0 +1,37 @@
+import { MiniMapMarkerDefault } from '@clikvn/showroom-visualizer';
+
+// 🎨 Custom Marker Component
+export const CustomMarker = (props: any) => {
+  return (
+    <div className="custom-minimap-marker ">
+      <MiniMapMarkerDefault
+        marker={props.marker}
+        active={props.active}
+        scaleOffset={props.scaleOffset}
+        color={props.color}
+        size={props.size}
+        onClick={props.onClick}
+      />
+    </div>
+  );
+};
+
+export const FloorplanMinimapDefault = (props: any) => {
+  return (
+    <div className="custom-hotspot-overview">
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <span style={{ fontSize: '12px', color: 'white' }}>
+          🏠 custom mini map
+        </span>
+      </div>
+    </div>
+  );
+};

package/example/src/components/CustomComponents/HotspotCategoryComponents.tsx

@@ -0,0 +1,106 @@
+import {
+  HotspotCategorySlideIn as HotspotCategorySlideInDefault,
+  ScenarioSlideIn as ScenarioSlideInDefault,
+  SpaceAndSceneSlideIn as SpaceAndSceneSlideInDefault,
+  FeatureSlideIn as FeatureSlideInDefault,
+  ProductSlideIn as ProductSlideInDefault,
+  PoiSlideIn as PoiSlideInDefault,
+} from '@clikvn/showroom-visualizer';
+
+// 🏠 Custom HotspotCategorySlideIn Component
+export const CustomHotspotCategorySlideIn = (props: any) => {
+  return <HotspotCategorySlideInDefault {...props} />;
+};
+
+// 🎬 Custom ScenarioSlideIn
+export const CustomScenarioSlideIn = (props: any) => {
+  return (
+    <div
+      style={{
+        background: 'linear-gradient(135deg, #6b46c1 0%, #2d3748 100%)',
+        padding: '20px',
+        height: '100%',
+        overflow: 'auto',
+      }}
+    >
+      <h3 style={{ color: 'white', marginBottom: '20px' }}>
+        🎬 Custom Scenarios
+      </h3>
+      <ScenarioSlideInDefault {...props} />
+    </div>
+  );
+};
+
+// 🏛️ Custom SpaceAndSceneSlideIn
+export const CustomSpaceAndSceneSlideIn = (props: any) => {
+  return (
+    <div
+      style={{
+        background: 'linear-gradient(135deg, #4299e1 0%, #2b6cb0 100%)',
+        padding: '20px',
+        height: '100%',
+        overflow: 'auto',
+      }}
+    >
+      <h3 style={{ color: 'white', marginBottom: '20px' }}>
+        🏛️ Custom Spaces & Scenes
+      </h3>
+      <SpaceAndSceneSlideInDefault {...props} />
+    </div>
+  );
+};
+
+// ⭐ Custom FeatureSlideIn
+export const CustomFeatureSlideIn = (props: any) => {
+  return (
+    <div
+      style={{
+        background: 'linear-gradient(135deg, #ed8936 0%, #c05621 100%)',
+        padding: '20px',
+        height: '100%',
+        overflow: 'auto',
+      }}
+    >
+      <h3 style={{ color: 'white', marginBottom: '20px' }}>
+        ⭐ Custom Features
+      </h3>
+      <FeatureSlideInDefault {...props} />
+    </div>
+  );
+};
+
+// 🛍️ Custom ProductSlideIn
+export const CustomProductSlideIn = (props: any) => {
+  return (
+    <div
+      style={{
+        background: 'linear-gradient(135deg, #48bb78 0%, #2f855a 100%)',
+        padding: '20px',
+        height: '100%',
+        overflow: 'auto',
+      }}
+    >
+      <h3 style={{ color: 'white', marginBottom: '20px' }}>
+        🛍️ Custom Products
+      </h3>
+      <ProductSlideInDefault {...props} />
+    </div>
+  );
+};
+
+// 📍 Custom PoiSlideIn
+export const CustomPoiSlideIn = (props: any) => {
+  return (
+    <div
+      style={{
+        background: 'linear-gradient(135deg, #e53e3e 0%, #c53030 100%)',
+        padding: '20px',
+        height: '100%',
+        overflow: 'auto',
+      }}
+    >
+      <h3 style={{ color: 'white', marginBottom: '20px' }}>📍 Custom POI</h3>
+      <PoiSlideInDefault {...props} />
+    </div>
+  );
+};

package/example/src/components/CustomComponents/PinActionsComponents.tsx

@@ -0,0 +1,45 @@
+import {
+  PinActions as PinActionsDefault,
+  PinActionButtonWithTooltipDefault,
+} from '@clikvn/showroom-visualizer';
+
+// 🎯 Custom PinActions Component
+export const CustomPinActions = (props: any) => {
+  return (
+    <div style={{ filter: 'hue-rotate(180deg)' }}>
+      <PinActionsDefault {...props} />
+    </div>
+  );
+};
+
+// 🎯 Custom PinAction Button Component
+export const CustomPinActionButton = (props: any) => {
+  return (
+    <div
+      style={{
+        filter: 'drop-shadow(0 0 3px rgba(255, 215, 0, 0.6))',
+        transform: props.disabled ? 'scale(0.95)' : 'scale(1)',
+        transition: 'all 0.2s ease',
+        display: 'inline-block',
+        backgroundColor: 'red',
+      }}
+    >
+      <button {...props} />
+    </div>
+  );
+};
+
+// 🎯 Custom PinAction ButtonWithTooltip Component
+export const CustomPinActionButtonWithTooltip = (props: any) => {
+  return (
+    <div
+      style={{
+        border: '2px solid rgba(255, 215, 0, 0.5)',
+        borderRadius: '4px',
+        padding: '2px',
+      }}
+    >
+      <PinActionButtonWithTooltipDefault {...props} />
+    </div>
+  );
+};

package/example/src/components/CustomComponents/PlayBarComponents.tsx

@@ -0,0 +1,41 @@
+// 🎵 Custom PlayBar Components
+export const CustomPlayBarTooltip = (props: any) => {
+  return (
+    <div
+      style={{
+        border: '2px solid #ff6b6b',
+        borderRadius: '8px',
+        padding: '2px',
+      }}
+    >
+      {props.children}
+    </div>
+  );
+};
+
+export const CustomPlayBarButton = (props: any) => {
+  return (
+    <div
+      style={{
+        filter: 'drop-shadow(0 0 5px rgba(102, 126, 234, 0.5))',
+        transform: props.disabled ? 'none' : 'scale(1.05)',
+        transition: 'all 0.2s ease',
+        display: 'inline-block',
+      }}
+    >
+      {props.children || (
+        <button
+          {...props}
+          style={{
+            padding: '8px 16px',
+            borderRadius: '4px',
+            border: '1px solid #667eea',
+            background: props.disabled ? '#ccc' : '#667eea',
+            color: 'white',
+            cursor: props.disabled ? 'not-allowed' : 'pointer',
+          }}
+        />
+      )}
+    </div>
+  );
+};

package/example/src/components/CustomComponents/PoiDetailComponents.tsx

@@ -0,0 +1,296 @@
+// 📦 Custom PoiDetailSlideIn Components
+export const CustomPoiDetailDrawer = (props: any) => {
+  return (
+    <div
+      style={{
+        border: '3px solid #48bb78',
+        borderRadius: '12px',
+        position: 'relative',
+      }}
+    >
+      {props.children}
+    </div>
+  );
+};
+
+export const CustomPoiDetailBottomSheet = (props: any) => {
+  return (
+    <div
+      style={{
+        border: '3px solid #ed8936',
+        borderRadius: '12px',
+        position: 'relative',
+      }}
+    >
+      {props.children}
+    </div>
+  );
+};
+
+export const CustomProductDetailHeader = (props: any) => {
+  return (
+    <div
+      style={{
+        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        padding: '16px',
+        borderRadius: '8px',
+        marginBottom: '12px',
+        color: 'white',
+      }}
+    >
+      <div
+        style={{ fontWeight: 'bold', marginBottom: '8px', fontSize: '18px' }}
+      >
+        ✨ {props.title || 'Custom Header'}
+      </div>
+      {props.displayPrice && (
+        <div style={{ fontSize: '16px', opacity: 0.9 }}>
+          💰 {props.displayPrice}
+        </div>
+      )}
+      {props.rating && props.rating > 0 && (
+        <div style={{ fontSize: '14px', marginTop: '8px' }}>
+          ⭐ Rating: {props.rating}/5
+        </div>
+      )}
+      {props.onBack && (
+        <button
+          onClick={props.onBack}
+          style={{
+            marginTop: '12px',
+            padding: '6px 12px',
+            borderRadius: '4px',
+            border: '1px solid rgba(255,255,255,0.3)',
+            background: 'rgba(255,255,255,0.1)',
+            color: 'white',
+            cursor: 'pointer',
+          }}
+        >
+          ← Back
+        </button>
+      )}
+    </div>
+  );
+};
+
+export const CustomGroupActionButton = (props: any) => {
+  return (
+    <div
+      style={{
+        background: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
+        padding: '12px',
+        borderRadius: '8px',
+        marginBottom: '12px',
+      }}
+    >
+      <div
+        style={{
+          color: 'white',
+          fontSize: '12px',
+          marginBottom: '8px',
+          fontWeight: 'bold',
+        }}
+      >
+        🎯 Custom Actions
+      </div>
+      <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+        {props.actions?.map((action: any) => (
+          <button
+            key={action.key}
+            onClick={() => props.onClick?.(action.key)}
+            disabled={action.disabled}
+            style={{
+              flex: 1,
+              minWidth: '80px',
+              padding: '8px',
+              borderRadius: '6px',
+              border: '1px solid rgba(255,255,255,0.3)',
+              background:
+                props.activeKey === action.key
+                  ? 'rgba(255,255,255,0.3)'
+                  : 'rgba(255,255,255,0.1)',
+              color: 'white',
+              cursor: action.disabled ? 'not-allowed' : 'pointer',
+              opacity: action.disabled ? 0.5 : 1,
+            }}
+          >
+            {action.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export const CustomTabs = (props: any) => {
+  return (
+    <div
+      style={{
+        border: '2px dashed #4299e1',
+        borderRadius: '8px',
+        padding: '4px',
+        background: 'rgba(66, 153, 225, 0.1)',
+      }}
+    >
+      {props.children}
+    </div>
+  );
+};
+
+export const CustomTabsContent = (props: any) => {
+  return (
+    <div
+      style={{
+        border: '2px solid #ed8936',
+        borderRadius: '8px',
+        padding: '8px',
+        background: 'rgba(237, 137, 54, 0.1)',
+      }}
+    >
+      {props.children}
+    </div>
+  );
+};
+
+// 📄 Custom TabsContent Sub-components
+export const CustomInfo = (props: any) => {
+  return (
+    <div
+      style={{
+        background: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)',
+        padding: '16px',
+        borderRadius: '8px',
+        minHeight: '200px',
+      }}
+    >
+      <div
+        style={{
+          color: '#333',
+          fontWeight: 'bold',
+          marginBottom: '12px',
+          fontSize: '16px',
+        }}
+      >
+        ℹ️ Custom Info Tab
+      </div>
+      {props.description && (
+        <div style={{ marginBottom: '16px', color: '#555' }}>
+          <strong>Description:</strong>
+          <div style={{ marginTop: '8px' }}>{props.description}</div>
+        </div>
+      )}
+      {props.specification && (
+        <div style={{ color: '#555' }}>
+          <strong>Specification:</strong>
+          <div style={{ marginTop: '8px' }}>{props.specification}</div>
+        </div>
+      )}
+      {props.galleryProduct && props.galleryProduct.length > 0 && (
+        <div style={{ marginTop: '16px', color: '#555' }}>
+          <strong>Gallery Items: {props.galleryProduct.length}</strong>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const CustomGallery = (props: any) => {
+  return (
+    <div
+      style={{
+        background: 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)',
+        padding: '16px',
+        borderRadius: '8px',
+        minHeight: '200px',
+      }}
+    >
+      <div
+        style={{
+          color: '#333',
+          fontWeight: 'bold',
+          marginBottom: '12px',
+          fontSize: '16px',
+        }}
+      >
+        🖼️ Custom Gallery Tab
+      </div>
+      {props.items && props.items.length > 0 ? (
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))',
+            gap: '12px',
+          }}
+        >
+          {props.items.map((item: any, index: number) => (
+            <div
+              key={index}
+              onClick={() => props.onClick?.(index, item.type)}
+              style={{
+                aspectRatio: '16/9',
+                background: 'rgba(255,255,255,0.5)',
+                borderRadius: '8px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                cursor: 'pointer',
+                border: '2px solid rgba(0,0,0,0.1)',
+              }}
+            >
+              <span style={{ color: '#666' }}>📷 Item {index + 1}</span>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div style={{ color: '#666', textAlign: 'center', padding: '40px' }}>
+          No gallery items
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const CustomArTab = (props: any) => {
+  return (
+    <div
+      style={{
+        background: 'linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)',
+        padding: '16px',
+        borderRadius: '8px',
+        minHeight: '200px',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <div
+        style={{
+          color: 'white',
+          fontWeight: 'bold',
+          marginBottom: '12px',
+          fontSize: '16px',
+        }}
+      >
+        📱 Custom AR Tab
+      </div>
+      {props.ar && (
+        <div
+          style={{
+            background: 'rgba(255,255,255,0.2)',
+            padding: '20px',
+            borderRadius: '8px',
+            color: 'white',
+            textAlign: 'center',
+          }}
+        >
+          <div style={{ fontSize: '24px', marginBottom: '8px' }}>📱</div>
+          <div>AR Model Available</div>
+          <div style={{ fontSize: '12px', marginTop: '8px', opacity: 0.8 }}>
+            ID: {props.ar.id}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};