feat: add UserSettings component to design system

components/atoms/Button/button.tsx

@@ -5,10 +5,9 @@ interface ButtonProps extends React.ComponentProps<typeof SupabaseButtonComponen
   //Add additional prop definitions here
 }
 
-const Button: React.FC<ButtonProps> = ( props ) => {
-
+const Button: React.FC<ButtonProps> = (props) => {
   const style = {
-    primary: "!bg-orange-500 !border-orange-500 hover:!bg-orange-600",
+    primary: "!bg-light-orange-9 !text-light-orange-2 !border-light-orange-9 hover:!bg-light-orange-10",
     default: "!bg-slate-50 !border-slate-300 text-slate-800 hover:!bg-slate-100",
     outline: "!bg-orange-50 !border-orange-500 !text-orange-600 hover:!bg-orange-100",
     link: "!text-orange-600 hover:!bg-orange-100"
@@ -18,12 +17,15 @@ const Button: React.FC<ButtonProps> = ( props ) => {
     <SupabaseButtonComponent
       {...props}
       className={
-        `${props.className && props.className} !text-sm !font-semibold !tracking-tight !py-1 !px-3 !rounded-md focus-visible:!border-orange-500 focus:outline-none focus-visible:ring focus-visible:!ring-orange-200 ` +
+        `${
+          props.className && props.className
+        } !text-sm !font-semibold !tracking-tight !py-1 !px-3 !rounded-md focus-visible:!border-orange-500 focus:outline-none focus-visible:ring focus-visible:!ring-orange-200 ` +
         `${props.type === "primary" ? style.primary : ""}` +
         `${props.type === "default" ? style.default : ""}` +
         `${props.type === "outline" ? style.outline : ""}` +
         `${props.type === "link" ? style.link : ""}`
-      }>
+      }
+    >
       {props.children}
     </SupabaseButtonComponent>
   );

components/atoms/Checkbox/checkbox.tsx

@@ -3,11 +3,16 @@ import { Checkbox as SupbaseCheckboxComponent } from "@supabase/ui";
 
 interface CheckboxProps extends React.ComponentProps<typeof SupbaseCheckboxComponent> {
   //Add additional prop definitions here
-  title: string
+  title: string;
 }
 
-const Checkbox: React.FC<CheckboxProps> = ( props ) => {
-  return <SupbaseCheckboxComponent {...props} />;
+const Checkbox: React.FC<CheckboxProps> = (props) => {
+  return (
+    <SupbaseCheckboxComponent
+      className={`checked:[&>*]:!bg-orange-500 !text-orange-500 ${props.className || ""}`}
+      {...props}
+    />
+  );
 };
 
 export default Checkbox;

components/atoms/LanguagePill/LanguagePill.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import Image, { StaticImageData } from "next/image";
+
+import JavascriptIcon from "img/icons/☕️.svg";
+import ReactIcon from "/img/icons/⚛️.svg";
+import PythonIcon from "/img/icons/🐍.svg";
+import AIIcon from "/img/icons/🤖.svg";
+import MLIcon from "/img/icons/🧠.svg";
+import RustIcon from "/img/icons/🦀.svg";
+
+interface LanguagePillProps {
+  topic: "react" | "javascript" | "python" | "ML" | "AI" | "rust" | string;
+  classNames?: string;
+  onClick?: () => void;
+}
+const LanguagePill = ({ topic, classNames, onClick }: LanguagePillProps) => {
+  const renderTopicIcon = (name: string) => {
+    const iconMap: { [name: string]: StaticImageData } = {
+      react: ReactIcon,
+      rust: RustIcon,
+      javascript: JavascriptIcon,
+      AI: AIIcon,
+      ML: MLIcon,
+      python: PythonIcon
+    };
+
+    return iconMap[name] || "";
+  };
+  return (
+    <div
+      onClick={onClick}
+      className={`cursor-pointer text-xs text-light-slate-11 rounded-[1.875rem] w-max flex items-center gap-1 py-2 px-4 bg-light-slate-6 ${
+        classNames || ""
+      }`}
+    >
+      <Image src={renderTopicIcon(topic)} alt={topic} />
+      <span className="font-normal capitalize">{topic}</span>
+    </div>
+  );
+};
+
+export default LanguagePill;

components/atoms/Pill/pill.tsx

@@ -24,7 +24,7 @@ const Pill: React.FC<PillProps> = ({ className, text, color = "slate", size = "b
             : "bg-light-slate-4 "
     }
         ${size === "small" ? "py-1 px-1.5  " : "py-1.5 px-2 "}
-        inline-flex items-center rounded-full gap-1`}
+        inline-flex items-center rounded-full gap-1 ${className}`}
     >
       {icon}
 

components/atoms/TextInput/text-input.tsx

@@ -42,11 +42,11 @@ const TextInput = ({
         {label && <p className="mb-2   text-light-slate-9 text-sm">{label}</p>}
         <div
           className={clsx(
-            classNames,
             "flex-1 px-3 text-light-slate-12 bg-white shadow-input border transition rounded-lg py-1 flex items-center",
             borderless && "!border-none",
             state === "invalid" ? " focus-within:border-light-red-10 " : "focus-within:border-light-orange-9 ",
-            disabled && "bg-light-slate-3"
+            disabled && "bg-light-slate-3",
+            classNames
           )}
         >
           <input
@@ -57,7 +57,7 @@ const TextInput = ({
             placeholder={placeholder || ""}
             onChange={onChange}
             value={value}
-            className="flex-1 focus:outline-none  "
+            className={`flex-1 focus:outline-none  ${classNames}`}
             autoFocus={autoFocus}
             disabled={disabled}
           />

components/organisms/UserSettingsPage/user-settings-page.tsx

@@ -0,0 +1,121 @@
+import React, { useState } from "react";
+
+import Button from "components/atoms/Button/button";
+import Checkbox from "components/atoms/Checkbox/checkbox";
+import TextInput from "components/atoms/TextInput/text-input";
+import Title from "components/atoms/Typography/title";
+import Select from "components/atoms/Select/select";
+import SelectOption from "components/atoms/Select/select-option";
+import LanguagePill from "components/atoms/LanguagePill/LanguagePill";
+
+const UserSettingsPage = () => {
+  const [selectedInterest, setSelectedInterest] = useState<string[]>([]);
+  const interestArray = ["javascript", "python", "rust", "ML", "AI", "react"];
+
+  const handleSelectInterest = (interest: string) => {
+    if (selectedInterest.length > 0 && selectedInterest.includes(interest)) {
+      setSelectedInterest((prev) => prev.filter((item) => item !== interest));
+    } else {
+      setSelectedInterest((prev) => [...prev, interest]);
+    }
+  };
+
+  return (
+    <div>
+      <div className="flex flex-col md:flex-row md:justify-between gap-4 text-sm text-light-slate-11">
+        <div>
+          <Title className="!text-2xl !text-light-slate-11" level={2}>
+            Public profile
+          </Title>
+          <form className="flex flex-col gap-6 mt-6">
+            <TextInput
+              classNames="bg-light-slate-4 text-light-slate-11 font-medium"
+              label="Name*"
+              placeholder="April O'Neil"
+            />
+            <TextInput
+              classNames="bg-light-slate-4 text-light-slate-11 font-medium"
+              placeholder="[email protected]"
+              label="Email*"
+            />
+
+            {/* Bio section */}
+            <div className="flex flex-col gap-2">
+              <label className="text-light-slate-11 text-sm font-normal">Bio</label>
+              <textarea
+                rows={4}
+                placeholder="Tell us about yourself."
+                className="bg-light-slate-4 rounded-lg px-3 py-2 "
+              ></textarea>
+            </div>
+            <TextInput
+              classNames="bg-light-slate-4 text-light-slate-11 font-medium"
+              placeholder="https://turtlepower.pizza"
+              label="URL"
+            />
+            <TextInput
+              classNames="bg-light-slate-4 text-light-slate-11"
+              placeholder="@aprilcodes"
+              label="Twitter Username"
+            />
+            <TextInput
+              classNames="bg-light-slate-4 text-light-slate-11 font-medium"
+              placeholder="StockGen"
+              label="Company"
+            />
+            <TextInput
+              classNames="bg-light-slate-4 text-light-slate-11 font-medium"
+              placeholder="USA"
+              label="Location"
+            />
+            <div>
+              <Checkbox value={"true"} title="profile email" label="Display current local time" />
+              <span className="ml-7 text-light-slate-9 text-sm font-normal">
+                Other users will see the time difference from their local time.
+              </span>
+            </div>
+            <div className="flex flex-col gap-2">
+              <label>Time zone*</label>
+              <Select>
+                <SelectOption value="Wat+1">Select time zone</SelectOption>
+              </Select>
+            </div>
+            <Button type="primary">Update profile</Button>
+          </form>
+        </div>
+        <div className="flex flex-col-reverse md:flex-col gap-6">
+          <div className="flex flex-col gap-6">
+            <Title className="!text-2xl !font-normal !text-light-slate-11" level={2}>
+              Interests
+            </Title>
+            <div className="flex gap-3 w-72 flex-wrap">
+              {interestArray.map((topic, index) => (
+                <LanguagePill
+                  onClick={() => handleSelectInterest(topic)}
+                  classNames={`${selectedInterest.includes(topic) && "bg-light-orange-10 text-white"}`}
+                  topic={topic}
+                  key={index}
+                />
+              ))}
+            </div>
+            <button className="px-4 w-max py-2  rounded-lg bg-light-slate-4 border border-light-slate-8">
+              Update Interest
+            </button>
+          </div>
+          <div className="flex flex-col gap-6">
+            <div className="flex flex-col gap-3 ">
+              <label className="text-light-slate-11 text-2xl  font-normal">Email Preferences</label>
+              <Checkbox value={"true"} title="profile email" label="Display Email On Profile" />
+              <Checkbox value={"true"} title="collaboration requests" label="Receive collaboration requests" />
+            </div>
+            <button className="px-4 w-max py-2  rounded-lg bg-light-slate-4 border border-light-slate-8">
+              Update Preferences
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UserSettingsPage;

package.json

@@ -45,6 +45,7 @@
     "@nivo/pie": "^0.80.0",
     "@nivo/scatterplot": "^0.80.0",
     "@primer/octicons-react": "^17.5.0",
+    "@radix-ui/react-checkbox": "^1.0.1",
     "@radix-ui/react-context-menu": "^1.0.0",
     "@radix-ui/react-dropdown-menu": "^1.0.0",
     "@radix-ui/react-hover-card": "^1.0.2",

stories/atoms/language-pill.stories.tsx

@@ -0,0 +1,22 @@
+import LanguagePill from "components/atoms/LanguagePill/LanguagePill";
+import { ComponentStory } from "@storybook/react";
+
+const Storyconfig = {
+  title: "Design System/Atoms/LanguagePill"
+};
+export default Storyconfig;
+
+const LanguagePillTemplate: ComponentStory<typeof LanguagePill> = (args) => <LanguagePill {...args} />;
+
+export const LanguagePillDefault = LanguagePillTemplate.bind({});
+export const LanguagePillSelected = LanguagePillTemplate.bind({});
+
+LanguagePillDefault.args = {
+  topic: "javascript"
+};
+
+LanguagePillSelected.args = {
+  topic: "python",
+
+  classNames: "bg-light-orange-10 text-white"
+};

stories/organisms/user-settings-page.stories.tsx

@@ -0,0 +1,11 @@
+import UserSettingsPage from "components/organisms/UserSettingsPage/user-settings-page";
+import { ComponentStory } from "@storybook/react";
+
+const StoryConfig = {
+  title: "Design System/Organisms/UserSettingsPage"
+};
+export default StoryConfig;
+
+const UserSettingsPageTemplate: ComponentStory<typeof UserSettingsPage> = () => <UserSettingsPage />;
+
+export const Default = UserSettingsPageTemplate.bind({});

styles/globals.css

@@ -17,6 +17,9 @@
   border: 1px solid #f76808 !important  ;
   box-shadow: 0px 0px 0px 2px #ffcca7, 0px 1px 2px rgba(0, 0, 0, 0.1) !important;
 }
+.sbui-checkbox:hover {
+  border-color: #f76808 !important;
+}
 input[type="search"]::-webkit-search-cancel-button {
   -webkit-appearance: none !important;
 }