@ozdao/martyrs 0.2.469 → 0.2.471

package/src/modules/globals/views/classes/globals.store.js

@@ -1,7 +1,6 @@
 import { reactive } from 'vue';
-
 // Globals 
-import { setError }   from '@martyrs/src/modules/globals/views/store/globals'
+import { setError } from '@martyrs/src/modules/globals/views/store/globals';
 
 class Store {
   constructor(apiUrl) {
@@ -10,12 +9,14 @@ class Store {
       current: {}
     });
     this.apiUrl = apiUrl;
+    console.log(`Store initialized with API URL: ${apiUrl}`);
   }
 
-  // Simplified request method to avoid repetition and enhance maintainability
+  // Simplified request method with enhanced debugging
   async request(endpoint, options = {}) {
     const url = endpoint.startsWith('http') ? endpoint : `${this.apiUrl}${endpoint}`;
-
+    console.log(`Making request to: ${url}`, { method: options.method || 'GET' });
+    
     const defaultOptions = {
       credentials: 'include', // Assumes credentials needed for each request
       headers: {}
@@ -32,56 +33,135 @@ class Store {
     }
 
     try {
+      console.log('Request options:', JSON.stringify({
+        method: finalOptions.method,
+        headers: finalOptions.headers,
+        bodyLength: finalOptions.body ? JSON.stringify(finalOptions.body).length : 0
+      }));
+      
       const response = await fetch(url, finalOptions);
+      console.log(`Response status: ${response.status}`);
+      
+      // Log response headers for debugging
+      const responseHeaders = {};
+      response.headers.forEach((value, key) => {
+        responseHeaders[key] = value;
+      });
+      console.log('Response headers:', responseHeaders);
 
       if (!response.ok) {
-        const errorData = await response.json();
-        const error = new Error(errorData.message || 'Unknown error');
+        let errorData;
+        try {
+          errorData = await response.json();
+        } catch (jsonError) {
+          console.error('Failed to parse error response as JSON:', jsonError);
+          errorData = { message: 'Failed to parse server response' };
+        }
+        
+        console.error('Server returned error:', errorData);
+        const error = new Error(errorData.message || `Server returned ${response.status}`);
+        error.status = response.status;
         error.errorCode = errorData.errorCode || 'UNKNOWN_ERROR';
+        error.responseText = await response.text().catch(() => 'Unable to get response text');
         throw error;
       }
 
-      return await response.json();
-
+      const data = await response.json();
+      console.log('Response data received successfully');
+      return data;
     } catch (error) {
-      console.error(error);
+      console.error('Request failed:', error);
+      if (error.name === 'TypeError' && error.message.includes('Failed to fetch')) {
+        console.error('Network error detected. This might indicate a CORS issue, network connectivity problem, or the server is down.');
+        const enhancedError = new Error('Network error: Unable to connect to the server');
+        enhancedError.originalError = error;
+        setError(enhancedError);
+        throw enhancedError;
+      }
+      
       setError(error);
       throw error;
     }
   }
 
   async create(item) {
-    return await this.request('/create', {
-      method: 'POST',
-      body: item
-    });
+    console.log('Creating item:', item);
+    try {
+      const result = await this.request('/create', {
+        method: 'POST',
+        body: item
+      });
+      console.log('Create operation succeeded:', result);
+      return result;
+    } catch (error) {
+      console.error('Create operation failed:', error);
+      // Log specific error details
+      if (error.status) {
+        console.error(`HTTP Status: ${error.status}`);
+      }
+      if (error.errorCode) {
+        console.error(`Error Code: ${error.errorCode}`);
+      }
+      setError(error);
+      throw error;
+    }
   }
 
   async read(options = {}) {
-    const queryParams = new URLSearchParams(options).toString();
-    
-    return await this.request(`/read?${queryParams}`);
+    console.log('Reading items with options:', options);
+    try {
+      const queryParams = new URLSearchParams(options).toString();
+      const result = await this.request(`/read?${queryParams}`);
+      console.log(`Read operation returned ${result.length || 0} items`);
+      return result;
+    } catch (error) {
+      console.error('Read operation failed:', error);
+      setError(error);
+      throw error;
+    }
   }
 
   async update(item) {
-    return await this.request('/update', {
-      method: 'PUT',
-      body: item
-    });
+    console.log('Updating item:', item);
+    try {
+      const result = await this.request('/update', {
+        method: 'PUT',
+        body: item
+      });
+      console.log('Update operation succeeded:', result);
+      return result;
+    } catch (error) {
+      console.error('Update operation failed:', error);
+      setError(error);
+      throw error;
+    }
   }
 
   async delete(item) {
-    return await this.request(`/delete`, {
-      method: 'DELETE',
-      body: item
-    });
+    console.log('Deleting item:', item);
+    try {
+      const result = await this.request(`/delete`, {
+        method: 'DELETE',
+        body: item
+      });
+      console.log('Delete operation succeeded');
+      return result;
+    } catch (error) {
+      console.error('Delete operation failed:', error);
+      setError(error);
+      throw error;
+    }
   }
 
   // Enhanced Mutations utilizing Vue reactivity system efficiently 
   setItems(items, state) {
+    console.log(`Setting ${items.length} items in state`);
     const targetState = state || this.state.items;
-
-    state.splice(0, state.length, ...items);
+    if (Array.isArray(targetState)) {
+      targetState.splice(0, targetState.length, ...items);
+    } else {
+      console.error('Target state is not an array in setItems');
+    }
   }
 
   addItem(item, state, property = '_id') {
@@ -89,26 +169,34 @@ class Store {
     const existingItemIndex = targetState.findIndex(i => i[property] === item[property]);
     
     if (existingItemIndex === -1) {
+      console.log('Adding new item to state');
       targetState.splice(0, 0, item);
     } else {
+      console.log('Updating existing item in state');
       Object.assign(targetState[existingItemIndex], item);
     }
   }
 
   updateItem(item, state, property = '_id') {
-      const targetState = state || this.state.items;
-      const index = targetState.findIndex(i => i[property] === item[property]);
-      if (index !== -1) {
-        targetState.splice(index, 1, item);
-      }
+    const targetState = state || this.state.items;
+    const index = targetState.findIndex(i => i[property] === item[property]);
+    if (index !== -1) {
+      console.log('Replacing item in state');
+      targetState.splice(index, 1, item);
+    } else {
+      console.log('Item not found for update in state');
     }
+  }
 
   removeItem(item, state, property = '_id') {
     const targetState = state || this.state.items;
     // Поиск и удаление элемента по указанному ключу
     const index = targetState.findIndex(i => i[property] === item[property]);
     if (index !== -1) {
+      console.log('Removing item from state');
       targetState.splice(index, 1);
+    } else {
+      console.log('Item not found for removal from state');
     }
   }
 }

package/src/modules/globals/views/classes/globals.websocket.js

@@ -1,7 +1,3 @@
-/**
- * Global WebSocket handler for centralized WebSocket connections
- * @martyrs/src/modules/globals/views/classes/globals.websocket.js
- */
 class GlobalWebSocket {
   constructor() {
     this.socket = null;
@@ -11,16 +7,13 @@ class GlobalWebSocket {
     this.reconnectDelay = 3000;
     this.baseUrl = null;
     this.pingInterval = null;
-    this.pingIntervalTime = 30000; // 30 seconds
+    this.pingIntervalTime = 30000;
     this.listeners = {};
     this.userId = null;
     this.connectPromise = null;
+    this.subscribedModules = new Set(); // <--- ключевое изменение
   }
 
-  /**
-   * Initialize WebSocket with configuration options
-   * @param {Object} options - Configuration options
-   */
   initialize(options = {}) {
     this.maxReconnectAttempts = options.maxReconnectAttempts || this.maxReconnectAttempts;
     this.reconnectDelay = options.reconnectDelay || this.reconnectDelay;
@@ -28,67 +21,39 @@ class GlobalWebSocket {
     this.pingIntervalTime = options.pingInterval || this.pingIntervalTime;
   }
 
-  /**
-   * Get default WebSocket URL based on current HTTP URL
-   * @returns {String} WebSocket URL
-   */
   _getDefaultWsUrl() {
-    // Check if window exists (for SSR compatibility)
-    if (typeof window === 'undefined') {
-      return '/api/ws'; // Default fallback for SSR
-    }
-    
+    if (typeof window === 'undefined') return '/api/ws';
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
     const host = window.location.host;
     return `${protocol}//${host}/api/ws`;
   }
 
-  /**
-   * Connect to WebSocket server
-   * @param {String} userId - User ID for authentication
-   * @returns {Promise} Promise that resolves when connection is established
-   */
   connect(userId) {
-    // Skip if running in SSR
-    if (typeof window === 'undefined') {
-      return Promise.resolve(false);
-    }
-
-    // Always update userId before any connection logic
+    if (typeof window === 'undefined') return Promise.resolve(false);
     this.userId = userId;
 
-    // If already connected with the same user and socket is valid, return the existing connection
-    if (this.isConnected && this.socket && this.socket.readyState === WebSocket.OPEN) {
+    if (this.isConnected && this.socket?.readyState === WebSocket.OPEN) {
       return Promise.resolve(this.socket);
     }
 
-    // Clear any existing connection promise to avoid conflicts
-    this.connectPromise = null;
-
-    // Create new connection promise
     this.connectPromise = new Promise((resolve, reject) => {
-      // Close existing connection if any
       this.disconnect();
 
-      // Create new WebSocket connection with user ID
       const wsUrl = userId ? `${this.baseUrl}?userId=${encodeURIComponent(userId)}` : this.baseUrl;
       this.socket = new WebSocket(wsUrl);
 
-      // Setup event handlers
       this.socket.onopen = () => {
         this._handleOpen();
         resolve(this.socket);
       };
-      
+
       this.socket.onmessage = this._handleMessage.bind(this);
-      this.socket.onerror = (error) => {
-        this._handleError(error);
-        reject(error);
+      this.socket.onerror = (err) => {
+        this._handleError(err);
+        reject(err);
       };
-      
       this.socket.onclose = this._handleClose.bind(this);
 
-      // Timeout for connection
       setTimeout(() => {
         if (!this.isConnected) {
           reject(new Error('WebSocket connection timeout'));
@@ -101,32 +66,20 @@ class GlobalWebSocket {
     return this.connectPromise;
   }
 
-  /**
-   * Disconnect from WebSocket server
-   */
   disconnect() {
-    // Skip if running in SSR
-    if (typeof window === 'undefined') {
-      return;
-    }
+    if (typeof window === 'undefined') return;
 
     if (this.socket) {
-      // Remove event listeners
       this.socket.onopen = null;
       this.socket.onmessage = null;
       this.socket.onerror = null;
       this.socket.onclose = null;
-      
-      // Close connection
-      if (this.socket.readyState === WebSocket.OPEN || 
-          this.socket.readyState === WebSocket.CONNECTING) {
+      if (this.socket.readyState === WebSocket.OPEN || this.socket.readyState === WebSocket.CONNECTING) {
         this.socket.close();
       }
-      
       this.socket = null;
     }
 
-    // Clear ping interval
     if (this.pingInterval) {
       clearInterval(this.pingInterval);
       this.pingInterval = null;
@@ -136,11 +89,6 @@ class GlobalWebSocket {
     this.userId = null;
   }
 
-  /**
-   * Send data through WebSocket
-   * @param {Object|String} data - Data to send
-   * @returns {Boolean} Success status
-   */
   async send(data) {
     if (!this.socket || this.socket.readyState !== WebSocket.OPEN) {
       console.error('Cannot send message: WebSocket is not connected');
@@ -148,51 +96,29 @@ class GlobalWebSocket {
     }
 
     try {
-      const message = typeof data === 'string' ? data : JSON.stringify(data);
-      await this.socket.send(message);
+      const msg = typeof data === 'string' ? data : JSON.stringify(data);
+      this.socket.send(msg);
       return true;
-    } catch (error) {
-      console.error('Error sending WebSocket message:', error);
+    } catch (err) {
+      console.error('Error sending message:', err);
       return false;
     }
   }
 
-  /**
-   * Register an event listener
-   * @param {String} eventType - Event type to listen for
-   * @param {Function} callback - Callback function
-   * @param {Object} options - Additional options like module name for namespacing
-   * @returns {String} Listener ID for unregistering
-   */
   addEventListener(eventType, callback, options = {}) {
     const listenerId = `${options.module || 'global'}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-    
-    if (!this.listeners[eventType]) {
-      this.listeners[eventType] = {};
-    }
-    
+    if (!this.listeners[eventType]) this.listeners[eventType] = {};
     this.listeners[eventType][listenerId] = callback;
     return listenerId;
   }
 
-  /**
-   * Remove an event listener
-   * @param {String} eventType - Event type
-   * @param {String} listenerId - Listener ID returned from addEventListener
-   */
   removeEventListener(eventType, listenerId) {
-    if (this.listeners[eventType] && this.listeners[eventType][listenerId]) {
+    if (this.listeners[eventType]?.[listenerId]) {
       delete this.listeners[eventType][listenerId];
     }
   }
 
-  /**
-   * Remove all listeners for a module
-   * @param {String} moduleName - Module name to remove listeners for
-   */
   removeModuleListeners(moduleName) {
-    if (!moduleName) return;
-    
     Object.keys(this.listeners).forEach(eventType => {
       Object.keys(this.listeners[eventType]).forEach(listenerId => {
         if (listenerId.startsWith(`${moduleName}_`)) {
@@ -202,111 +128,85 @@ class GlobalWebSocket {
     });
   }
 
-  /**
-   * Handle WebSocket open event
-   */
+  async subscribeModule(moduleName) {
+    if (!moduleName || this.subscribedModules.has(moduleName)) return;
+    const success = await this.send({ type: 'subscribe', module: moduleName });
+    if (success) {
+      this.subscribedModules.add(moduleName);
+    }
+  }
+
+  _resubscribeAllModules() {
+    for (const moduleName of this.subscribedModules) {
+      this.send({ type: 'subscribe', module: moduleName });
+    }
+  }
+
   _handleOpen() {
     this.isConnected = true;
     this.reconnectAttempts = 0;
-    
-    // Setup ping interval to keep connection alive
+
     this.pingInterval = setInterval(() => {
-      if (this.socket && this.socket.readyState === WebSocket.OPEN) {
+      if (this.socket?.readyState === WebSocket.OPEN) {
         this.socket.send(JSON.stringify({ type: 'ping' }));
       }
     }, this.pingIntervalTime);
 
-    // Notify listeners
+    this._resubscribeAllModules(); // <--- ВАЖНО
     this._notifyListeners('open', { isConnected: true });
   }
 
-  /**
-   * Handle WebSocket message event
-   * @param {Event} event - WebSocket message event
-   */
   _handleMessage(event) {
     try {
       const data = JSON.parse(event.data);
-      
-      // Generic event notifications
       this._notifyListeners('message', data);
-      
-      // Specific event type notifications
       if (data.type) {
         this._notifyListeners(data.type, data);
       }
-      
-    } catch (error) {
-      console.error('Error processing WebSocket message:', error);
+    } catch (err) {
+      console.error('WebSocket message error:', err);
     }
   }
 
-  /**
-   * Handle WebSocket error
-   * @param {Error} error - WebSocket error
-   */
   _handleError(error) {
     console.error('WebSocket error:', error);
     this._notifyListeners('error', { error });
   }
 
-  /**
-   * Handle WebSocket close event
-   * @param {Event} event - WebSocket close event
-   */
   _handleClose(event) {
     this.isConnected = false;
-    
-    // Clear ping interval
     if (this.pingInterval) {
       clearInterval(this.pingInterval);
       this.pingInterval = null;
     }
-    
+
     this._notifyListeners('close', { code: event.code, reason: event.reason });
-    
-    // Attempt to reconnect if not a normal closure and we have a userId
+
     if (event.code !== 1000 && this.userId && this.reconnectAttempts < this.maxReconnectAttempts) {
       this.reconnectAttempts++;
       const delay = this.reconnectDelay * this.reconnectAttempts;
-      
       setTimeout(() => {
-        if (this.userId) {
-          this.connect(this.userId).catch(error => {
-            console.error('Reconnection failed:', error);
-          });
-        }
+        this.connect(this.userId).catch(err => {
+          console.error('Reconnection failed:', err);
+        });
       }, delay);
     }
   }
 
-  /**
-   * Notify event listeners
-   * @param {String} eventType - Event type
-   * @param {Object} data - Event data
-   */
   _notifyListeners(eventType, data) {
-    if (!this.listeners[eventType]) return;
-    
-    Object.values(this.listeners[eventType]).forEach(callback => {
+    Object.values(this.listeners[eventType] || {}).forEach(fn => {
       try {
-        callback(data);
-      } catch (error) {
-        console.error(`Error in WebSocket ${eventType} listener:`, error);
+        fn(data);
+      } catch (err) {
+        console.error(`Listener for ${eventType} failed:`, err);
       }
     });
   }
 
-  /**
-   * Get connection status
-   * @returns {Boolean} Connection status
-   */
   isSocketConnected() {
     return this.isConnected && this.socket?.readyState === WebSocket.OPEN;
   }
 }
 
-// Create singleton instance
 const globalWebSocket = new GlobalWebSocket();
-
-export default globalWebSocket;
+export default globalWebSocket;

package/src/modules/icons/entities/IconMusic.vue

@@ -0,0 +1,14 @@
+<template>
+	<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80" fill="none">
+		<path :fill="fill" :class="$attrs.class" d="M40.4192 33.6535H40.4231C44.2049 33.6535 47.2716 36.7242 47.2716 40.506C47.2716 44.2917 44.2049 47.3584 40.4192 47.3584C36.6374 47.3584 33.5667 44.2917 33.5667 40.506C33.5667 36.7362 36.6136 33.6774 40.3794 33.6575L40.3913 33.6535H40.3953L40.4192 33.6535ZM56.0983 44.5582H56.1063C57.0835 44.5582 58.0607 44.9316 58.8035 45.6784L68.8299 55.7049C69.4417 56.3166 69.4417 57.3057 68.8339 57.9215H68.8299C68.5241 58.2274 68.1228 58.3783 67.7217 58.3783C67.3244 58.3783 66.9312 58.2313 66.6253 57.9334H66.6174L66.6134 57.9215L56.5909 47.899V47.895C56.4559 47.76 56.2771 47.6925 56.0984 47.6925C55.9315 47.6925 55.7647 47.752 55.6336 47.8752L41.3171 62.1876C41.0112 62.4935 40.61 62.6484 40.2088 62.6484C39.8077 62.6484 39.4104 62.4935 39.1045 62.1916V62.1955L39.1006 62.1876C38.4888 61.5759 38.4888 60.5828 39.1006 59.971L40.9954 58.0761V57.9768L38.8582 55.8396C38.7232 55.7045 38.5484 55.633 38.3696 55.633C38.2028 55.633 38.0359 55.6926 37.9048 55.8158L37.9485 55.8277L37.9009 55.8158L29.3602 64.3564C29.0543 64.6623 28.6491 64.8173 28.2479 64.8173C27.8586 64.8173 27.4613 64.6663 27.1594 64.3763H27.1555L27.1396 64.3565C26.5278 63.7447 26.5278 62.7516 27.1396 62.1398L35.6644 53.619L35.6684 53.611H35.6723C36.3993 52.8881 37.3447 52.5186 38.2981 52.5028H38.314C38.3299 52.4988 38.3537 52.4988 38.3696 52.4988C39.3468 52.4988 40.328 52.8722 41.0748 53.6191L43.212 55.7563L43.3114 55.7602L53.3974 45.6742C54.1283 44.9473 55.0777 44.5739 56.0351 44.5619H56.051H56.047C56.0669 44.5579 56.0825 44.5582 56.0983 44.5582ZM52.6543 8.00019V8.00416H52.6384C52.2967 8.00416 51.9512 8.04786 51.6016 8.13922L7.01895 20.0842C7.00703 20.0882 6.99511 20.0921 6.98319 20.0961L6.97922 20.1001C4.83012 20.696 3.56291 22.9165 4.13891 25.0735L14.0818 62.1837C14.5704 64.0031 16.219 65.2028 18.0146 65.2028C18.1417 65.2028 18.2688 65.1988 18.3959 65.1869L18.4038 29.5066C18.4038 25.975 21.2203 23.099 24.732 23.0037L24.7399 23.0077C24.7955 23.0037 24.8511 22.9998 24.9067 22.9998V23.0037H59.8L56.5903 11.0191C56.1017 9.19968 54.4537 8.00019 52.6543 8.00019ZM24.9071 25.4356H24.8912H24.8713H24.8673C22.6348 25.4595 20.8354 27.2749 20.8354 29.5074V67.9243C20.8354 70.1727 22.6587 71.996 24.9071 72H71.067C73.3154 71.996 75.1348 70.1727 75.1388 67.9243V29.5074C75.1348 27.259 73.3154 25.4356 71.067 25.4356H24.9071Z"/>
+	</svg>
+</template>
+
+<script setup>
+	const props = defineProps({
+	  fill: {
+	    type: String,
+	    default: 'rgb(var(--black))'
+	  }
+	})
+</script>

package/src/modules/icons/navigation/IconCheck.vue

@@ -0,0 +1,31 @@
+<template>
+	<svg 
+    width="19" 
+    height="15" 
+    viewBox="0 0 19 15" 
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path 
+			:fill="fill"
+      d="M9.97505 0.3828C10.3344 0.5453 10.5657 0.90155 10.5657 1.2953V13.2953C10.5657 13.6891 10.3344 14.0453 9.97505 14.2078C9.61567 14.3703 9.1938 14.3047 8.90005 14.0422L4.68442 10.2953H2.56567C1.46255 10.2953 0.565674 9.39843 0.565674 8.2953V6.2953C0.565674 5.19218 1.46255 4.2953 2.56567 4.2953H4.68442L8.90005 0.548425C9.1938 0.285925 9.61567 0.223425 9.97505 0.3828Z"
+    />
+    <path 
+      :fill="fill"
+      d="M15.5657 6.23301L13.8469 4.51426C13.5563 4.22051 13.0813 4.22363 12.7876 4.51426C12.4938 4.80488 12.4938 5.27988 12.7876 5.57363L14.5063 7.29238L12.7876 9.01113C12.4938 9.30176 12.4969 9.77676 12.7876 10.0705C13.0782 10.3643 13.5532 10.3643 13.8469 10.0705L15.5657 8.35176L17.2844 10.0705C17.5751 10.3643 18.0501 10.3611 18.3438 10.0705C18.6376 9.77988 18.6376 9.30488 18.3438 9.01113L16.6251 7.29238L18.3438 5.57363C18.6376 5.28301 18.6344 4.80801 18.3438 4.51426C18.0532 4.22051 17.5782 4.22051 17.2844 4.51426L15.5657 6.23301Z"
+    />
+  </svg>
+</template>
+
+<script setup>
+	const props = defineProps({
+  fill: {
+    type: String,
+    default: {
+      position: 'rgb(var(--black))'
+    }
+  },
+})
+</script>
+
+

package/src/modules/icons/navigation/IconHeart.vue

@@ -0,0 +1,26 @@
+<template>
+	<svg 
+		width="26"
+		height="26" 
+		viewBox="0 0 26 26" 
+		fill="none" 
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path 
+			:fill="fill"
+			fill-rule="evenodd" 
+			clip-rule="evenodd" 
+			d="M12.9996 10.8L22.8994 0.900244L25.0993 3.1002L15.1995 13L25.0993 22.8998L22.8994 25.0998L12.9996 15.2L3.09976 25.0998L0.899801 22.8998L10.7996 13L0.899801 3.1002L3.09976 0.900244L12.9996 10.8Z"/>
+	</svg>
+</template>
+
+
+<script setup>
+	const props = defineProps({
+	  fill: {
+	    type: String,
+	    default: 'rgb(var(--black))'
+	  }
+	})
+</script>
+

package/src/modules/icons/navigation/IconPause.vue

@@ -0,0 +1,31 @@
+<template>
+	<svg 
+    width="19" 
+    height="15" 
+    viewBox="0 0 19 15" 
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path 
+			:fill="fill"
+      d="M9.97505 0.3828C10.3344 0.5453 10.5657 0.90155 10.5657 1.2953V13.2953C10.5657 13.6891 10.3344 14.0453 9.97505 14.2078C9.61567 14.3703 9.1938 14.3047 8.90005 14.0422L4.68442 10.2953H2.56567C1.46255 10.2953 0.565674 9.39843 0.565674 8.2953V6.2953C0.565674 5.19218 1.46255 4.2953 2.56567 4.2953H4.68442L8.90005 0.548425C9.1938 0.285925 9.61567 0.223425 9.97505 0.3828Z"
+    />
+    <path 
+      :fill="fill"
+      d="M15.5657 6.23301L13.8469 4.51426C13.5563 4.22051 13.0813 4.22363 12.7876 4.51426C12.4938 4.80488 12.4938 5.27988 12.7876 5.57363L14.5063 7.29238L12.7876 9.01113C12.4938 9.30176 12.4969 9.77676 12.7876 10.0705C13.0782 10.3643 13.5532 10.3643 13.8469 10.0705L15.5657 8.35176L17.2844 10.0705C17.5751 10.3643 18.0501 10.3611 18.3438 10.0705C18.6376 9.77988 18.6376 9.30488 18.3438 9.01113L16.6251 7.29238L18.3438 5.57363C18.6376 5.28301 18.6344 4.80801 18.3438 4.51426C18.0532 4.22051 17.5782 4.22051 17.2844 4.51426L15.5657 6.23301Z"
+    />
+  </svg>
+</template>
+
+<script setup>
+	const props = defineProps({
+  fill: {
+    type: String,
+    default: {
+      position: 'rgb(var(--black))'
+    }
+  },
+})
+</script>
+
+