diff --git a/package.json b/package.json
index 482d192..1385eeb 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
+ "react-select": "^5.1.0",
"sass": "^1.43.3",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1"
diff --git a/src/App.tsx b/src/App.tsx
index 3d015ab..300a94e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,7 +2,8 @@ import "./global.scss";
import Search from "./components/Search";
import PopularSearch from "./components/PopularSearch";
import Input from "./components/Input";
-import Country from "./components/Country";
+import Country from "./components/SelectSearch";
+import SelectCheckbox from "./components/SelectCheckbox";
function App() {
return (
@@ -19,7 +20,9 @@ function App() {
message={"اشتباه است."}
/>
-
+
+
+
);
}
diff --git a/src/components/Checkbox/index.scss b/src/components/Checkbox/index.scss
new file mode 100644
index 0000000..f4dae1f
--- /dev/null
+++ b/src/components/Checkbox/index.scss
@@ -0,0 +1,98 @@
+.checkbox-symbol {
+ position: absolute;
+ width: 0;
+ height: 0;
+ pointer-events: none;
+ user-select: none;
+}
+
+.checkbox-container {
+ box-sizing: border-box;
+ background: #ffffff;
+ color: #222;
+ height: 30px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-flow: row wrap;
+}
+
+.checkbox-container * {
+ box-sizing: border-box;
+}
+
+.checkbox-input {
+ position: absolute;
+ visibility: hidden;
+}
+
+.checkbox {
+ user-select: none;
+ cursor: pointer;
+ padding: 6px 8px;
+ border-radius: 6px;
+ overflow: hidden;
+ transition: all 0.3s ease;
+ display: flex;
+}
+
+.checkbox:not(:last-child) {
+ margin-right: 6px;
+}
+
+.checkbox:hover {
+ background: inherit;
+}
+
+.checkbox span {
+ vertical-align: middle;
+ transform: translate3d(0, 0, 0);
+}
+
+.checkbox span:first-child {
+ position: relative;
+ flex: 0 0 18px;
+ width: 18px;
+ height: 18px;
+ border-radius: 4px;
+ transform: scale(1);
+ border: 1px solid #cccfdb;
+ transition: all 0.3s ease;
+}
+
+.checkbox span:first-child svg {
+ position: absolute;
+ top: 3px;
+ left: 2px;
+ fill: none;
+ stroke: #fff;
+ stroke-dasharray: 16px;
+ stroke-dashoffset: 16px;
+ transition: all 0.3s ease;
+ transform: translate3d(0, 0, 0);
+}
+
+.checkbox span:last-child {
+ padding-left: 8px;
+ line-height: 18px;
+}
+
+.checkbox:hover span:first-child {
+ border-color: #0077ff;
+}
+
+.checkbox-input:checked + .checkbox span:first-child {
+ background: #0077ff;
+ border-color: #0077ff;
+ animation: zoom-in-out 0.3s ease;
+}
+
+.checkbox-input:checked + .checkbox span:first-child svg {
+ stroke-dashoffset: 0;
+}
+
+@keyframes zoom-in-out {
+ 50% {
+ transform: scale(0.9);
+ }
+}
\ No newline at end of file
diff --git a/src/components/Checkbox/index.tsx b/src/components/Checkbox/index.tsx
new file mode 100644
index 0000000..eb5b29a
--- /dev/null
+++ b/src/components/Checkbox/index.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+
+export default function Checkbox(props : any) {
+ return (
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/Country/index.tsx b/src/components/Country/index.tsx
deleted file mode 100644
index 703822e..0000000
--- a/src/components/Country/index.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import React, { useState } from "react";
-import _ from "lodash";
-
-import iran from "./iran.png";
-import iraq from "./iraq.png";
-import spain from "./spain.png";
-import uk from "./united-kingdom.png";
-import arrow from "./arrow.png";
-
-import Search from "../Search";
-
-interface Types {
- lang?: string;
- theme?: string;
- countries?: Array