-

.gitignore

@@ -1,27 +0,0 @@
-# Node.js
-node_modules/
-
-# Next.js build output
-/.next/
-
-# .env files (contains sensitive information)
-.env.local
-.env.development
-.env.test
-.env.production
-
-# TypeScript build output
-/build/
-
-# Editor-specific files
-.vscode/
-.idea/
-
-# Logs
-*.log
-
-# Mac OS
-.DS_Store
-
-# Windows
-Thumbs.db

src/app/(client-components)/(HeroSearchForm2Mobile)/(real-estate-search-form)/PriceRangeInput.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { FC } from "react";
+import Slider from "rc-slider";
+import convertNumbThousand from "@/utils/convertNumbThousand";
+
+export interface PriceRangeInputProps {
+  onChange?: (e: number[]) => void;
+  defaultValue?: number[];
+}
+
+const PriceRangeInput: FC<PriceRangeInputProps> = ({
+  onChange,
+  defaultValue,
+}) => {
+  const [rangePrices, setRangePrices] = useState(
+    defaultValue || [100000, 4000000]
+  );
+
+  useEffect(() => {
+    if (!defaultValue) return;
+    setRangePrices(defaultValue);
+  }, [defaultValue]);
+
+  return (
+    <div className="p-5">
+      <span className="block font-semibold text-xl sm:text-2xl">
+        Range Price?
+      </span>
+      <div className="relative flex flex-col space-y-8 mt-7">
+        <Slider
+          range
+          className="text-red-400"
+          min={10000}
+          max={10000000}
+          defaultValue={[rangePrices[0], rangePrices[1]]}
+          allowCross={false}
+          step={1000}
+          onChange={(e) => {
+            setRangePrices(e as number[]);
+            onChange && onChange(e as number[]);
+          }}
+        />
+
+        <div className="flex justify-between space-x-3">
+          <div>
+            <label
+              htmlFor="minPrice"
+              className="block text-sm font-medium text-neutral-700 dark:text-neutral-300"
+            >
+              Min price
+            </label>
+            <div className="mt-1 relative rounded-md">
+              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <span className="text-neutral-500 sm:text-sm">$</span>
+              </div>
+              <input
+                type="text"
+                disabled
+                name="minPrice"
+                id="minPrice"
+                className="focus:ring-primary-500 focus:border-primary-500 block w-full pl-7 pr-3 sm:text-sm border-neutral-200 rounded-full text-neutral-900"
+                value={convertNumbThousand(rangePrices[0])}
+              />
+            </div>
+          </div>
+          <div>
+            <label
+              htmlFor="maxPrice"
+              className="block text-sm font-medium text-neutral-700 dark:text-neutral-300"
+            >
+              Max price
+            </label>
+            <div className="mt-1 relative rounded-md">
+              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <span className="text-neutral-500 sm:text-sm">$</span>
+              </div>
+              <input
+                disabled
+                type="text"
+                name="maxPrice"
+                id="maxPrice"
+                className="focus:ring-primary-500 focus:border-priring-primary-500 block w-full pl-7 pr-3 sm:text-sm border-neutral-200 rounded-full text-neutral-900"
+                value={convertNumbThousand(rangePrices[1])}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PriceRangeInput;

src/components/PostTypeFeaturedIcon.tsx

@@ -0,0 +1,140 @@
+import { PostDataType } from "@/data/types";
+import React, { FC } from "react";
+
+export interface PostTypeFeaturedIconProps {
+  className?: string;
+  postType?: PostDataType["postType"];
+  onClick?: () => void;
+  wrapSize?: string;
+  iconSize?: string;
+}
+
+const PostTypeFeaturedIcon: FC<PostTypeFeaturedIconProps> = ({
+  className = "",
+  postType = "standard",
+  onClick,
+  wrapSize = "w-11 h-11",
+  iconSize = "w-6 h-6",
+}) => {
+  const renderMediaIcon = () => {
+    if (postType === "video") {
+      return (
+        <svg
+          className={iconSize}
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M17.13 7.9799C20.96 10.1899 20.96 13.8099 17.13 16.0199L14.04 17.7999L10.95 19.5799C7.13 21.7899 4 19.9799 4 15.5599V11.9999V8.43989C4 4.01989 7.13 2.2099 10.96 4.4199L13.21 5.7199"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeMiterlimit="10"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      );
+    }
+
+    if (postType === "audio") {
+      return (
+        <svg
+          className={iconSize}
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M6.28016 22C8.00328 22 9.40016 20.6031 9.40016 18.88C9.40016 17.1569 8.00328 15.76 6.28016 15.76C4.55703 15.76 3.16016 17.1569 3.16016 18.88C3.16016 20.6031 4.55703 22 6.28016 22Z"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M20.8404 7.96009V4.60009C20.8404 2.00009 19.2104 1.64009 17.5604 2.09009L11.3204 3.79009C10.1804 4.10009 9.40039 5.00009 9.40039 6.30009V8.47009V9.93009V18.8701"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M20.8398 16.8V12"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M17.7196 19.9199C19.4427 19.9199 20.8396 18.5231 20.8396 16.7999C20.8396 15.0768 19.4427 13.6799 17.7196 13.6799C15.9965 13.6799 14.5996 15.0768 14.5996 16.7999C14.5996 18.5231 15.9965 19.9199 17.7196 19.9199Z"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M9.40039 9.5199L20.8404 6.3999"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      );
+    }
+
+    if (postType === "gallery") {
+      return (
+        <svg
+          className={iconSize}
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M2 12.99V15C2 20 4 22 9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M11 8C11 9.1 10.1 10 9 10C7.9 10 7 9.1 7 8C7 6.9 7.9 6 9 6"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M2.66992 18.9501L7.59992 15.6401C8.38992 15.1101 9.52992 15.1701 10.2399 15.7801L10.5699 16.0701C11.3499 16.7401 12.6099 16.7401 13.3899 16.0701L17.5499 12.5001C18.3299 11.8301 19.5899 11.8301 20.3699 12.5001L21.9999 13.9001"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <div
+      className={`nc-PostTypeFeaturedIcon ${className}`}
+      data-nc-id="PostTypeFeaturedIcon"
+      onClick={onClick}
+    >
+      {!!postType && postType !== "standard" && (
+        <span
+          className={`bg-neutral-900 bg-opacity-60 rounded-full flex  items-center justify-center text-xl text-white border border-white ${wrapSize}`}
+        >
+          {renderMediaIcon()}
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default PostTypeFeaturedIcon;