h-section 0.0.1

package/dist/styles.css

@@ -0,0 +1 @@
+.hotelCard{width:100%;min-height:0;height:500px;box-sizing:border-box;padding:12px;border-radius:16px;display:flex;gap:24px;flex-direction:row;background-color:var(--white)}.hotelCard .imageWrapper{width:100%;height:100%;box-sizing:border-box;text-decoration:none!important}.hotelCard .imageWrapper img{width:100%;height:100%;box-sizing:border-box;object-fit:cover;border-radius:8px}.hotelCard .contentWrapper{width:100%;height:100%;display:flex;flex-direction:column;padding:6px 0;box-sizing:border-box;gap:16px;min-height:0}.hotelCard .contentWrapper .hotelDetail{width:100%;height:100%;min-height:0;display:flex;flex-direction:column}.hotelCard .contentWrapper .hotelDetail .locationSummary{width:100%;display:inline-flex;gap:4px;height:34px;align-items:flex-start}.hotelCard .contentWrapper .hotelDetail .locationSummary .locationSummary_Text{font-size:12px;line-height:16px;color:var(--black-text-secondary)}.hotelCard .contentWrapper .hotelDetail .hotelName{width:100%;height:27px;font-size:20px;color:var(--black-text);line-height:22px;font-weight:600;margin:0}.hotelCard .contentWrapper .hotelDetail .stars{width:100%;height:24px;display:inline-flex;gap:4px;margin-bottom:8px}.hotelCard .contentWrapper .hotelDetail .textContent{width:100%;height:100%;display:flex;flex-direction:column;gap:8px;min-height:0;flex:1}.hotelCard .contentWrapper .hotelDetail .textContent .textWrapper{max-height:120px;height:100%;overflow-y:auto;box-sizing:border-box;scrollbar-width:thin;scrollbar-color:#d9d9d9 transparent}.hotelCard .contentWrapper .hotelDetail .textContent::-webkit-scrollbar{width:4px;height:4px}.hotelCard .contentWrapper .hotelDetail .textContent::-webkit-scrollbar-thumb{background-color:#d9d9d9;border-radius:9999px}.hotelCard .contentWrapper .hotelDetail .textContent::-webkit-scrollbar-button{display:none}.hotelCard .contentWrapper .hotelDetail .textContent .textWrapper.open{max-height:100%;height:100%}.hotelCard .contentWrapper .hotelDetail .textContent .textWrapper:not(.open)~.textContent_btn svg{transform:rotate(180deg)}.hotelCard .contentWrapper .hotelDetail .textContent .textContent_btn{display:inline-flex;gap:10px;align-items:center;justify-content:center;width:100%;height:24px;padding:0;border:none;background-color:transparent;font-family:inherit!important;font-size:14px;color:var(--black-text);cursor:pointer}.hotelCard .contentWrapper .priceDetail{width:100%;height:auto;display:flex;flex-direction:column}.hotelCard .contentWrapper .priceDetail .priceOffer{width:100%;display:flex;align-items:center;gap:16px;padding-bottom:8px;border-bottom:1px solid var(--light-gray)}.hotelCard .contentWrapper .priceDetail .priceOffer .priceWrapper{width:100%;display:flex;flex-direction:column}.hotelCard .contentWrapper .priceDetail .priceOffer .priceWrapper .priceFrom_Text{font-size:12px;line-height:16px;width:100%;color:var(--black-text)}.hotelCard .contentWrapper .priceDetail .priceOffer .priceWrapper .oldPackagePrice{height:19px;font-size:14px;color:var(--black-text);width:100%;text-decoration:line-through}.hotelCard .contentWrapper .priceDetail .priceOffer .priceWrapper .currentPackagePrice{font-size:12px;line-height:16px;color:var(--black-text);width:100%}.hotelCard .contentWrapper .priceDetail .priceOffer .priceWrapper .currentPerPersonPrice{font-size:20px;font-weight:600;color:var(--blue);width:100%}.hotelCard .contentWrapper .priceDetail .priceOffer .priceWrapper .currentPerPersonPrice .perPerson_Text{font-size:12px;font-weight:400;color:var(--black-text-secondary)}.hotelCard .contentWrapper .offerBtn{margin-left:auto;border-radius:8px;padding:12px 24px;width:fit-content;background-color:var(--orange);display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none!important;color:var(--white)!important;font-weight:600;transition:.3s ease background-color}@media(hover:hover){.hotelCard .contentWrapper .offerBtn:hover{background-color:#262626}}.hotelCard .contentWrapper .priceDetail .priceWrapper .additionalOfferInfo{padding:8px 0;display:inline-flex;gap:4px;align-items:center}.hotelCard .contentWrapper .priceDetail .priceWrapper .additionalOfferInfo .flightInfo,.hotelCard .contentWrapper .priceDetail .priceWrapper .additionalOfferInfo .touristsInfo{width:fit-content;height:fit-content;padding:2px 6px;display:inline-flex;align-items:center;justify-content:center;gap:4px;border-radius:4px;background-color:var(--green-text-background);color:var(--green-text);border:1px solid var(--green-box-stroke);font-size:10px}.hotelCard .contentWrapper .priceDetail .priceWrapper .additionalOfferInfo .touristsInfo{background-color:#0000000a;color:var(--black-text);border:1px solid rgba(0,0,0,.0392)}.hotelCard .contentWrapper .priceDetail .tripDetail .tripDetail_Items{margin-top:8px;width:100%;display:inline-flex;gap:12px;align-items:center}.hotelCard .contentWrapper .priceDetail .tripDetail{height:fit-content}.hotelCard .contentWrapper .priceDetail .tripDetail .tripDetail_Items .tripDetail_Item{display:inline-flex;gap:4px;align-items:center;text-wrap:nowrap}.hotelCard .contentWrapper .priceDetail .tripDetail .tripDetail_Items .tripDetail_Item .tripDetail_Item_Text{font-size:12px;color:var(--black-text)}.hotelCard .contentWrapper .priceDetail .tripDetail .offerBtn{display:none}.hotelCard svg{flex-shrink:0}@media(max-width:900px){.hotelCard{flex-direction:column;height:auto;gap:8px}.hotelCard .imageWrapper,.hotelCard .imageWrapper img{height:300px}}@media(max-width:500px){.hotelCard .imageWrapper,.hotelCard .imageWrapper img{height:250px}.hotelCard .contentWrapper .priceDetail .tripDetail .offerBtn{display:flex;width:100%;box-sizing:border-box}.hotelCard .contentWrapper .priceDetail .priceOffer .offerBtn{display:none}.hotelCard .contentWrapper .priceDetail .tripDetail .tripDetail_Items{padding-bottom:16px;overflow-x:auto}.hotelCard .contentWrapper{padding:6px 0 0}.hotelCard .contentWrapper .hotelDetail .hotelName{min-height:27px;height:auto}}.hotelContent_section{display:flex;flex-direction:column;gap:18px}.hotelContent_section .hotelCard:nth-child(2n) .imageWrapper{order:2}.hotelContent_section .hotelCard:nth-child(2n) .contentWrapper{order:1}@media(max-width:900px){.hotelContent_section .hotelCard:nth-child(2n) .imageWrapper{order:initial}.hotelContent_section .hotelCard:nth-child(2n) .contentWrapper{order:initial}}:root{--blue: #077dad;--white: #ffffff;--black: #000000;--black-text: rgba(0, 0, 0, .85);--black-text-secondary: rgba(0, 0, 0, .65);--dark-gray: #535353;--light-gray: rgba(0, 0, 0, .06);--empty-star-gray: #f0f0f0;--yellow: #f0ab00;--green-text: #52c41a;--green-text-background: #f6ffed;--green-box-stroke: #b7eb8f;--orange: #e27300}body{background-color:#f5f5f5}

package/eslint.config.js

@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "h-section",
+  "private": false,
+  "version": "0.0.1",
+  "type": "commonjs",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build --config vite.lib.config.js",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "html-react-parser": "^5.2.17",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.33.0",
+    "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.7",
+    "@vitejs/plugin-react": "^5.0.0",
+    "eslint": "^9.33.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.3.0",
+    "vite": "^7.1.2"
+  },
+  "description": "",
+  "main": "eslint.config.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ct-balt/hotel-promotion-hotel-section.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/ct-balt/hotel-promotion-hotel-section/issues"
+  },
+  "homepage": "https://github.com/ct-balt/hotel-promotion-hotel-section#readme"
+}