From 5489ec349b862cfa11ba4c1fea1a7e4ec91a3158 Mon Sep 17 00:00:00 2001
From: "ALMAZROUEI Shamma (2021) WKIS203"
 <shamma.almazrouei.2021@live.rhul.ac.uk>
Date: Mon, 24 Feb 2025 00:27:19 +0530
Subject: [PATCH] Build a basic nav

---
 skillswap/package-lock.json           | 402 ++++++++++++++++++++++++++
 skillswap/package.json                |   1 +
 skillswap/src/App.jsx                 |   8 +-
 skillswap/src/assets/logo.svg         |   1 +
 skillswap/src/components/header.jsx   |  27 ++
 skillswap/src/components/ui/sheet.jsx | 108 +++++++
 6 files changed, 546 insertions(+), 1 deletion(-)
 create mode 100644 skillswap/src/assets/logo.svg
 create mode 100644 skillswap/src/components/header.jsx
 create mode 100644 skillswap/src/components/ui/sheet.jsx

diff --git a/skillswap/package-lock.json b/skillswap/package-lock.json
index 53c890a..34febcd 100644
--- a/skillswap/package-lock.json
+++ b/skillswap/package-lock.json
@@ -8,6 +8,7 @@
       "name": "skillswap",
       "version": "0.0.0",
       "dependencies": {
+        "@radix-ui/react-dialog": "^1.1.6",
         "@radix-ui/react-label": "^2.1.2",
         "@radix-ui/react-slot": "^1.1.2",
         "class-variance-authority": "^0.7.1",
@@ -1085,6 +1086,12 @@
         "node": ">=14"
       }
     },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.1.tgz",
+      "integrity": "sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA==",
+      "license": "MIT"
+    },
     "node_modules/@radix-ui/react-compose-refs": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz",
@@ -1100,6 +1107,142 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.6.tgz",
+      "integrity": "sha512-/IVhJV5AceX620DUJ4uYVMymzsipdKBzo3edo+omeskCKGm9FRHM0ebIdbPnlQVJqyuHbuBltQUOG2mOTq2IYw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.5",
+        "@radix-ui/react-focus-guards": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.2",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-portal": "1.1.4",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-slot": "1.1.2",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.5.tgz",
+      "integrity": "sha512-E4TywXY6UsXNRhFrECa5HAvE5/4BFcGyfTyK36gP+pAW1ed7UTK4vKwdr53gAJYwqbfCWC6ATvJa3J3R/9+Qrg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-escape-keydown": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz",
+      "integrity": "sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.2.tgz",
+      "integrity": "sha512-zxwE80FCU7lcXUGWkdt6XpTTCKPitG1XKOwViTxHVKIJhZl9MvIl2dVHeZENCWD9+EdWv05wlaEkRXUykU27RA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
+      "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-label": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.2.tgz",
@@ -1123,6 +1266,54 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.4.tgz",
+      "integrity": "sha512-sn2O9k1rPFYVyKd5LAJfo96JlSGVFpa1fS6UuBJfrZadudiw5tAmru+n1x7aMRQ84qDM71Zh1+SzK5QwU0tJfA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.2.tgz",
+      "integrity": "sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-primitive": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.2.tgz",
@@ -1164,6 +1355,72 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
+      "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+      "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz",
+      "integrity": "sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz",
+      "integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.34.8",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.34.8.tgz",
@@ -1634,6 +1891,18 @@
       "dev": true,
       "license": "Python-2.0"
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz",
+      "integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/array-buffer-byte-length": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
@@ -2270,6 +2539,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
+      "license": "MIT"
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -3033,6 +3308,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/get-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
@@ -4610,6 +4894,53 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-remove-scroll": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.3.tgz",
+      "integrity": "sha512-pnAi91oOk8g8ABQKGF5/M9qxmmOPxaAnopyTHYfqYEwJhyFrbbBtHuSgtKEoH0jpcxx5o3hXqH1mNd9/Oi+8iQ==",
+      "license": "MIT",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.7",
+        "react-style-singleton": "^2.2.3",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.3",
+        "use-sidecar": "^1.1.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz",
+      "integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-style-singleton": "^2.2.2",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-router": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.2.0.tgz",
@@ -4650,6 +4981,28 @@
         "react-dom": ">=18"
       }
     },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
+      "integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -5428,6 +5781,12 @@
       "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
       "license": "Apache-2.0"
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
     "node_modules/turbo-stream": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
@@ -5585,6 +5944,49 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
+      "integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sidecar": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
+      "integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/skillswap/package.json b/skillswap/package.json
index 96d5048..18c5681 100644
--- a/skillswap/package.json
+++ b/skillswap/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-slot": "^1.1.2",
     "class-variance-authority": "^0.7.1",
diff --git a/skillswap/src/App.jsx b/skillswap/src/App.jsx
index 41f7f2c..336718f 100644
--- a/skillswap/src/App.jsx
+++ b/skillswap/src/App.jsx
@@ -1,3 +1,9 @@
+import Header from '@/components/header';
+
 export default function App() {
-  return <div></div>;
+  return (
+    <div>
+      <Header />
+    </div>
+  );
 }
diff --git a/skillswap/src/assets/logo.svg b/skillswap/src/assets/logo.svg
new file mode 100644
index 0000000..c461bac
--- /dev/null
+++ b/skillswap/src/assets/logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="374" zoomAndPan="magnify" viewBox="0 0 280.5 101.249998" height="135" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><g/><clipPath id="0a432bdfb7"><path d="M 17 62 L 44 62 L 44 69.898438 L 17 69.898438 Z M 17 62 " clip-rule="nonzero"/></clipPath><clipPath id="ad1911d48d"><path d="M 0.78125 48 L 20 48 L 20 60 L 0.78125 60 Z M 0.78125 48 " clip-rule="nonzero"/></clipPath><clipPath id="d153408d5a"><path d="M 42 48 L 59.996094 48 L 59.996094 60 L 42 60 Z M 42 48 " clip-rule="nonzero"/></clipPath></defs><path fill="#7c3aed" d="M 18.929688 37.410156 C 19.3125 37.410156 19.691406 37.238281 19.945312 36.917969 C 22.078125 34.25 26.101562 32.59375 30.457031 32.59375 C 33.6875 32.59375 36.742188 33.515625 38.976562 35.078125 L 37.449219 35.121094 C 36.734375 35.140625 36.171875 35.734375 36.191406 36.457031 C 36.207031 37.15625 36.785156 37.714844 37.488281 37.714844 C 37.5 37.714844 37.511719 37.714844 37.523438 37.714844 L 42.207031 37.589844 C 42.917969 37.570312 43.484375 36.976562 43.464844 36.253906 L 43.339844 31.574219 C 43.320312 30.859375 42.71875 30.320312 42.003906 30.3125 C 41.289062 30.332031 40.726562 30.929688 40.746094 31.648438 L 40.789062 33.191406 C 38.089844 31.167969 34.421875 30.007812 30.457031 30.007812 C 25.253906 30.007812 20.566406 31.988281 17.917969 35.308594 C 17.472656 35.867188 17.558594 36.6875 18.121094 37.132812 C 18.359375 37.3125 18.644531 37.410156 18.929688 37.410156 Z M 18.929688 37.410156 " fill-opacity="1" fill-rule="nonzero"/><g clip-path="url(#0a432bdfb7)"><path fill="#7c3aed" d="M 41.152344 62.949219 C 39.023438 65.621094 35 67.273438 30.644531 67.273438 C 27.410156 67.273438 24.359375 66.355469 22.121094 64.792969 L 23.648438 64.75 C 24.363281 64.730469 24.929688 64.136719 24.910156 63.414062 C 24.890625 62.699219 24.277344 62.160156 23.574219 62.15625 L 18.894531 62.28125 C 18.550781 62.292969 18.222656 62.4375 17.984375 62.6875 C 17.746094 62.9375 17.621094 63.269531 17.628906 63.617188 L 17.753906 68.296875 C 17.773438 69 18.347656 69.554688 19.050781 69.554688 C 19.0625 69.554688 19.074219 69.554688 19.089844 69.554688 C 19.800781 69.539062 20.367188 68.941406 20.347656 68.222656 L 20.304688 66.679688 C 23.003906 68.703125 26.671875 69.863281 30.636719 69.863281 C 35.839844 69.863281 40.527344 67.882812 43.175781 64.5625 C 43.621094 64.003906 43.535156 63.183594 42.96875 62.738281 C 42.417969 62.300781 41.605469 62.386719 41.152344 62.949219 Z M 41.152344 62.949219 " fill-opacity="1" fill-rule="nonzero"/></g><path fill="#7c3aed" d="M 30.550781 40.667969 C 25.441406 40.667969 21.289062 44.820312 21.289062 49.933594 C 21.289062 55.046875 25.441406 59.203125 30.550781 59.203125 C 35.65625 59.203125 39.816406 55.042969 39.816406 49.933594 C 39.816406 44.828125 35.65625 40.667969 30.550781 40.667969 Z M 35.414062 48.480469 L 30.097656 53.796875 C 29.824219 54.070312 29.464844 54.210938 29.101562 54.210938 C 28.746094 54.210938 28.382812 54.070312 28.105469 53.796875 L 25.472656 51.15625 C 24.921875 50.613281 24.921875 49.722656 25.472656 49.171875 C 26.019531 48.621094 26.910156 48.621094 27.460938 49.171875 L 29.109375 50.8125 L 33.425781 46.496094 C 33.976562 45.945312 34.859375 45.945312 35.414062 46.496094 C 35.964844 47.046875 35.964844 47.929688 35.414062 48.480469 Z M 35.414062 48.480469 " fill-opacity="1" fill-rule="nonzero"/><g clip-path="url(#ad1911d48d)"><path fill="#7c3aed" d="M 14.925781 48.914062 C 13.53125 49.929688 11.804688 50.523438 9.945312 50.523438 C 8.082031 50.523438 6.359375 49.929688 4.949219 48.914062 C 2.445312 50.457031 0.78125 53.207031 0.78125 56.359375 L 0.78125 58.382812 C 0.78125 59.171875 1.421875 59.8125 2.222656 59.8125 L 17.664062 59.8125 C 18.453125 59.8125 19.105469 59.171875 19.105469 58.382812 L 19.105469 56.359375 C 19.101562 53.207031 17.425781 50.457031 14.925781 48.914062 Z M 14.925781 48.914062 " fill-opacity="1" fill-rule="nonzero"/></g><path fill="#7c3aed" d="M 4.441406 41.988281 C 4.441406 45.023438 6.898438 47.484375 9.9375 47.484375 C 12.972656 47.484375 15.433594 45.023438 15.433594 41.988281 C 15.433594 38.957031 12.972656 36.492188 9.9375 36.492188 C 6.90625 36.492188 4.441406 38.957031 4.441406 41.988281 Z M 4.441406 41.988281 " fill-opacity="1" fill-rule="nonzero"/><g clip-path="url(#d153408d5a)"><path fill="#7c3aed" d="M 56.140625 48.914062 C 54.746094 49.929688 53.023438 50.523438 51.160156 50.523438 C 49.300781 50.523438 47.574219 49.929688 46.164062 48.914062 C 43.664062 50.457031 42.003906 53.210938 42.003906 56.359375 L 42.003906 58.382812 C 42.003906 59.171875 42.644531 59.8125 43.445312 59.8125 L 58.875 59.8125 C 59.664062 59.8125 60.316406 59.171875 60.316406 58.382812 L 60.316406 56.359375 C 60.316406 53.207031 58.644531 50.457031 56.140625 48.914062 Z M 56.140625 48.914062 " fill-opacity="1" fill-rule="nonzero"/></g><path fill="#7c3aed" d="M 45.660156 41.988281 C 45.660156 45.023438 48.113281 47.484375 51.152344 47.484375 C 54.1875 47.484375 56.648438 45.023438 56.648438 41.988281 C 56.648438 38.957031 54.1875 36.492188 51.152344 36.492188 C 48.121094 36.492188 45.660156 38.957031 45.660156 41.988281 Z M 45.660156 41.988281 " fill-opacity="1" fill-rule="nonzero"/><g fill="#7c3aed" fill-opacity="1"><g transform="translate(72.404431, 66.34803)"><g><path d="M 12.3125 2.984375 C 19.78125 2.984375 24.421875 -1.390625 24.421875 -5.046875 C 24.421875 -11.90625 11.390625 -10.875 11.390625 -16.390625 C 11.390625 -21.03125 19.78125 -29.53125 25.96875 -29.53125 C 27.875 -29.53125 28.65625 -28.75 28.65625 -27.625 C 28.65625 -24.78125 24.015625 -19.6875 20.046875 -17.875 C 21.078125 -17 22.203125 -16.640625 23.390625 -16.640625 C 27.828125 -16.640625 32.625 -21.953125 32.625 -26.015625 C 32.625 -29.734375 28.59375 -32.875 23.65625 -32.875 C 15.5625 -32.875 6.1875 -24.21875 6.1875 -17.265625 C 6.1875 -9.21875 19.9375 -7.984375 19.9375 -3.609375 C 19.9375 -2.015625 18.1875 -1.28125 15.765625 -1.28125 C 10.765625 -1.28125 4.484375 -3.859375 3.1875 -7.9375 C 1.796875 -6.90625 1.03125 -5.609375 1.03125 -3.96875 C 1.03125 0.25 6.390625 2.984375 12.3125 2.984375 Z M 12.3125 2.984375 "/></g></g></g><g fill="#7c3aed" fill-opacity="1"><g transform="translate(98.684388, 66.34803)"><g><path d="M 4.84375 1.546875 C 5.3125 1.546875 5.609375 1.4375 5.671875 1.140625 C 6.03125 -1.75 7.421875 -5 9.125 -8.09375 C 9.21875 -7.984375 9.4375 -7.890625 9.484375 -7.828125 C 9.796875 -3.65625 11.4375 0.671875 15.359375 0.671875 C 20.875 0.671875 26.328125 -8.25 29.015625 -12.3125 C 29.015625 -13.03125 28.078125 -13.65625 27.5625 -13.65625 C 23.234375 -6.75 19.328125 -3.09375 16.640625 -3.09375 C 14.328125 -3.09375 13.765625 -5.875 13.65625 -7.15625 C 18.609375 -7.984375 23.75 -13.546875 23.75 -17.9375 C 23.75 -20.40625 22 -22.359375 20.203125 -22.359375 C 17.625 -22.359375 12.734375 -17.578125 9.125 -11.703125 L 8.859375 -11.796875 C 12.3125 -19.9375 17.9375 -29.46875 19.171875 -29.46875 C 19.375 -29.578125 19.484375 -29.78125 19.484375 -29.984375 C 19.484375 -30.96875 17.671875 -32.515625 16.125 -32.515625 C 13.5 -32.515625 1.140625 -8.03125 1.140625 -1.90625 C 1.140625 0.3125 3.5625 1.546875 4.84375 1.546875 Z M 11.640625 -9.484375 C 10.96875 -9.484375 10.515625 -9.640625 10.15625 -9.84375 C 13.296875 -15 17.21875 -19.125 18.8125 -19.125 C 19.265625 -19.125 19.484375 -18.859375 19.484375 -18.453125 C 19.484375 -16.1875 14.640625 -9.484375 11.640625 -9.484375 Z M 11.640625 -9.484375 "/></g></g></g><g fill="#7c3aed" fill-opacity="1"><g transform="translate(120.841998, 66.34803)"><g><path d="M 14.796875 -23.140625 C 15.453125 -24.578125 17.78125 -28.546875 20 -29.890625 C 20.15625 -29.9375 20.25 -30.046875 20.25 -30.203125 C 20.25 -30.921875 18.5 -32.5625 16.59375 -32.5625 C 14.375 -32.5625 12.375 -28.75 12.375 -26.59375 C 12.375 -24.171875 14.015625 -23.03125 14.796875 -23.140625 Z M 6.390625 1.234375 C 10.453125 1.234375 16.390625 -8.8125 18.65625 -12.3125 C 18.65625 -13.03125 17.734375 -13.65625 17.21875 -13.65625 C 12.78125 -7.0625 9.734375 -3.046875 7.828125 -3.046875 C 7.21875 -3.046875 6.953125 -3.609375 6.953125 -4.375 C 6.953125 -7.890625 11.4375 -16.84375 13.34375 -17.875 C 13.546875 -18.03125 13.609375 -18.1875 13.609375 -18.390625 C 13.609375 -19.484375 11.90625 -20.875 10.046875 -20.875 C 8.09375 -20.875 1.703125 -9.125 1.703125 -4.125 C 1.703125 -0.875 4.484375 1.234375 6.390625 1.234375 Z M 6.390625 1.234375 "/></g></g></g><g fill="#7c3aed" fill-opacity="1"><g transform="translate(132.64221, 66.34803)"><g><path d="M 5.984375 1.390625 C 10.359375 1.390625 16.4375 -8.8125 18.65625 -12.3125 C 18.65625 -13.03125 17.734375 -13.65625 17.21875 -13.65625 C 12.890625 -7.0625 9.328125 -2.625 7.578125 -2.625 C 7.0625 -2.625 6.75 -3.09375 6.75 -3.921875 C 6.75 -9.015625 16.75 -27.9375 19.484375 -29.46875 C 19.6875 -29.578125 19.78125 -29.734375 19.78125 -29.890625 C 19.78125 -30.765625 18.140625 -32.46875 16.390625 -32.46875 C 13.765625 -32.46875 1.75 -10 1.75 -3.65625 C 1.75 -0.984375 3.859375 1.390625 5.984375 1.390625 Z M 5.984375 1.390625 "/></g></g></g><g fill="#7c3aed" fill-opacity="1"><g transform="translate(144.442422, 66.34803)"><g><path d="M 5.984375 1.390625 C 10.359375 1.390625 16.4375 -8.8125 18.65625 -12.3125 C 18.65625 -13.03125 17.734375 -13.65625 17.21875 -13.65625 C 12.890625 -7.0625 9.328125 -2.625 7.578125 -2.625 C 7.0625 -2.625 6.75 -3.09375 6.75 -3.921875 C 6.75 -9.015625 16.75 -27.9375 19.484375 -29.46875 C 19.6875 -29.578125 19.78125 -29.734375 19.78125 -29.890625 C 19.78125 -30.765625 18.140625 -32.46875 16.390625 -32.46875 C 13.765625 -32.46875 1.75 -10 1.75 -3.65625 C 1.75 -0.984375 3.859375 1.390625 5.984375 1.390625 Z M 5.984375 1.390625 "/></g></g></g><g fill="#7c3aed" fill-opacity="1"><g transform="translate(156.242634, 66.34803)"><g><path d="M 12.3125 2.984375 C 19.78125 2.984375 24.421875 -1.390625 24.421875 -5.046875 C 24.421875 -11.90625 11.390625 -10.875 11.390625 -16.390625 C 11.390625 -21.03125 19.78125 -29.53125 25.96875 -29.53125 C 27.875 -29.53125 28.65625 -28.75 28.65625 -27.625 C 28.65625 -24.78125 24.015625 -19.6875 20.046875 -17.875 C 21.078125 -17 22.203125 -16.640625 23.390625 -16.640625 C 27.828125 -16.640625 32.625 -21.953125 32.625 -26.015625 C 32.625 -29.734375 28.59375 -32.875 23.65625 -32.875 C 15.5625 -32.875 6.1875 -24.21875 6.1875 -17.265625 C 6.1875 -9.21875 19.9375 -7.984375 19.9375 -3.609375 C 19.9375 -2.015625 18.1875 -1.28125 15.765625 -1.28125 C 10.765625 -1.28125 4.484375 -3.859375 3.1875 -7.9375 C 1.796875 -6.90625 1.03125 -5.609375 1.03125 -3.96875 C 1.03125 0.25 6.390625 2.984375 12.3125 2.984375 Z M 12.3125 2.984375 "/></g></g></g><g fill="#7c3aed" fill-opacity="1"><g transform="translate(182.522594, 66.34803)"><g><path d="M 6.640625 1.859375 C 8.765625 1.859375 11.59375 -3.765625 14.578125 -9.484375 L 14.9375 -9.484375 C 14.375 -7.46875 14.015625 -5.984375 14.015625 -4.375 C 14.015625 -0.5625 16.328125 1.859375 18.65625 1.859375 C 23.1875 1.859375 31.890625 -16.125 31.890625 -19.890625 C 31.890625 -21.546875 30.203125 -22.984375 29.109375 -22.984375 C 28.859375 -22.984375 28.703125 -22.9375 28.5 -22.828125 C 28.5 -16.75 21.796875 -2.890625 19.53125 -2.890625 C 18.96875 -2.890625 18.75 -3.5 18.75 -4.53125 C 18.75 -7.734375 21.078125 -14.640625 22.421875 -17.671875 C 22.625 -17.828125 22.71875 -18.09375 22.71875 -18.234375 C 22.71875 -19.125 21.125 -20.15625 19.734375 -20.15625 C 19.0625 -20.15625 18.453125 -19.890625 18.09375 -19.265625 C 11.90625 -8.65625 8.65625 -2.78125 7.53125 -2.78125 C 7.109375 -2.78125 6.90625 -3.1875 6.90625 -3.859375 C 6.90625 -6.796875 10.25 -14.890625 13.609375 -19.015625 C 13.859375 -19.0625 13.96875 -19.265625 13.96875 -19.53125 C 13.96875 -20.359375 12.78125 -21.796875 11.078125 -21.796875 C 8.25 -21.796875 1.859375 -9.484375 1.859375 -3.96875 C 1.859375 0.046875 5.25 1.859375 6.640625 1.859375 Z M 6.640625 1.859375 "/></g></g></g><g fill="#7c3aed" fill-opacity="1"><g transform="translate(211.275955, 66.34803)"><g><path d="M 6.390625 1.859375 C 9.6875 1.859375 13.546875 -7.625 15.8125 -10.453125 L 16.234375 -10.359375 C 15.671875 -8.859375 15 -6.90625 15 -4.640625 C 15 -1.390625 17.0625 0 18.34375 0 C 20.515625 0 24.625 -3.921875 29.6875 -12.3125 C 29.6875 -13.03125 28.75 -13.65625 28.234375 -13.65625 C 23.96875 -7.375 21.6875 -5 20.09375 -5 C 19.578125 -5 19.375 -5.359375 19.375 -6.03125 C 19.375 -8.09375 21.4375 -12.375 22 -12.46875 C 22.109375 -12.578125 22.15625 -12.734375 22.15625 -12.9375 C 22.15625 -14.015625 20.203125 -15.515625 18.34375 -15.515625 C 15.8125 -15.515625 8.859375 -2.890625 7.21875 -2.890625 C 6.90625 -2.890625 6.640625 -3.09375 6.640625 -3.921875 C 6.640625 -7.828125 12.3125 -19.421875 17.875 -19.421875 C 19.484375 -19.421875 20.609375 -18.8125 20.5625 -16.484375 C 21.90625 -16.703125 22.46875 -17.578125 22.46875 -18.609375 C 22.46875 -20.515625 19.171875 -22.984375 16.390625 -22.984375 C 10.15625 -22.984375 1.4375 -11.03125 1.4375 -4.015625 C 1.4375 -1.03125 3.859375 1.859375 6.390625 1.859375 Z M 6.390625 1.859375 "/></g></g></g><g fill="#7c3aed" fill-opacity="1"><g transform="translate(234.10345, 66.34803)"><g><path d="M 0.71875 10.828125 C 1.4375 10.828125 1.953125 10.5625 1.953125 10.203125 C 1.953125 10.09375 1.90625 10 1.796875 9.84375 C 1.796875 7.46875 3.25 2.9375 5.15625 -2.015625 C 5.5625 -0.25 7.671875 1.59375 9.796875 1.59375 C 15.5625 1.59375 24.421875 -9.28125 24.421875 -16.546875 C 24.421875 -20.609375 21.328125 -22.265625 20.046875 -22.265625 C 17.78125 -22.265625 12.890625 -16.390625 9.640625 -11.640625 L 9.375 -11.859375 C 12.109375 -17.875 14.484375 -21.390625 15.3125 -21.75 C 15.515625 -21.75 15.671875 -21.90625 15.671875 -22.203125 C 15.671875 -22.9375 14.28125 -24.484375 12.671875 -24.484375 C 9.375 -24.484375 -2.828125 2.46875 -2.828125 7.421875 C -2.828125 9.84375 -0.671875 10.828125 0.71875 10.828125 Z M 8.8125 -2.21875 C 7.890625 -2.21875 6.640625 -2.890625 6.078125 -3.859375 C 10.5625 -11.703125 18.140625 -18.8125 19.734375 -18.8125 C 20.046875 -18.8125 20.203125 -18.546875 20.203125 -18.09375 C 20.203125 -14.796875 13.703125 -2.21875 8.8125 -2.21875 Z M 8.8125 -2.21875 "/></g></g></g></svg>
\ No newline at end of file
diff --git a/skillswap/src/components/header.jsx b/skillswap/src/components/header.jsx
new file mode 100644
index 0000000..00ef46c
--- /dev/null
+++ b/skillswap/src/components/header.jsx
@@ -0,0 +1,27 @@
+import { Link } from 'react-router-dom';
+import { Button } from './ui/button';
+
+export default function Header() {
+  return (
+    <header>
+      <nav className='bg-violet-100 py-2 px-4 md:px-6 lg:px-10 flex items-center justify-between'>
+        <Link to='/'>
+          <img
+            src='/src/assets/logo.svg'
+            className='h-16 w-auto'
+            alt='SkillSwap Logo'
+          />
+        </Link>
+
+        <div className='flex items-center gap-4'>
+          <Button asChild>
+            <Link to='/login'>Login</Link>
+          </Button>
+          <Button variant='outline' asChild>
+            <Link to='/login'>Register</Link>
+          </Button>
+        </div>
+      </nav>
+    </header>
+  );
+}
diff --git a/skillswap/src/components/ui/sheet.jsx b/skillswap/src/components/ui/sheet.jsx
new file mode 100644
index 0000000..6741fcb
--- /dev/null
+++ b/skillswap/src/components/ui/sheet.jsx
@@ -0,0 +1,108 @@
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { cva } from "class-variance-authority";
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref} />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+)
+
+const SheetContent = React.forwardRef(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
+      <SheetPrimitive.Close
+        className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+      {children}
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
+    {...props} />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+    {...props} />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props} />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props} />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
-- 
GitLab