diff --git a/components/atoms/Button/button.tsx b/components/atoms/Button/button.tsx index f4a1400f7..2a3ab0ac3 100644 --- a/components/atoms/Button/button.tsx +++ b/components/atoms/Button/button.tsx @@ -5,10 +5,9 @@ interface ButtonProps extends React.ComponentProps = ( props ) => { - +const Button: React.FC = (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 = ( props ) => { + } + > {props.children} ); diff --git a/components/atoms/Checkbox/checkbox.tsx b/components/atoms/Checkbox/checkbox.tsx index 8e85ca50c..1a3bebccd 100644 --- a/components/atoms/Checkbox/checkbox.tsx +++ b/components/atoms/Checkbox/checkbox.tsx @@ -3,11 +3,16 @@ import { Checkbox as SupbaseCheckboxComponent } from "@supabase/ui"; interface CheckboxProps extends React.ComponentProps { //Add additional prop definitions here - title: string + title: string; } -const Checkbox: React.FC = ( props ) => { - return ; +const Checkbox: React.FC = (props) => { + return ( + *]:!bg-orange-500 !text-orange-500 ${props.className || ""}`} + {...props} + /> + ); }; export default Checkbox; diff --git a/components/atoms/LanguagePill/LanguagePill.tsx b/components/atoms/LanguagePill/LanguagePill.tsx new file mode 100644 index 000000000..33e2c90be --- /dev/null +++ b/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 ( +
+ {topic} + {topic} +
+ ); +}; + +export default LanguagePill; diff --git a/components/atoms/Pill/pill.tsx b/components/atoms/Pill/pill.tsx index 19784a6f0..f8165d7e6 100644 --- a/components/atoms/Pill/pill.tsx +++ b/components/atoms/Pill/pill.tsx @@ -24,7 +24,7 @@ const Pill: React.FC = ({ 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} diff --git a/components/atoms/TextInput/text-input.tsx b/components/atoms/TextInput/text-input.tsx index ff5dbdfb2..0494e4811 100644 --- a/components/atoms/TextInput/text-input.tsx +++ b/components/atoms/TextInput/text-input.tsx @@ -42,11 +42,11 @@ const TextInput = ({ {label &&

{label}

}
diff --git a/components/organisms/UserSettingsPage/user-settings-page.tsx b/components/organisms/UserSettingsPage/user-settings-page.tsx new file mode 100644 index 000000000..5af5caef0 --- /dev/null +++ b/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([]); + 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 ( +
+
+
+ + Public profile + +
+ + + + {/* Bio section */} +
+ + +
+ + + + +
+ + + Other users will see the time difference from their local time. + +
+
+ + +
+ + +
+
+
+ + Interests + +
+ {interestArray.map((topic, index) => ( + handleSelectInterest(topic)} + classNames={`${selectedInterest.includes(topic) && "bg-light-orange-10 text-white"}`} + topic={topic} + key={index} + /> + ))} +
+ +
+
+
+ + + +
+ +
+
+
+
+ ); +}; + +export default UserSettingsPage; diff --git "a/img/icons/\342\230\225\357\270\217.svg" "b/img/icons/\342\230\225\357\270\217.svg" new file mode 100644 index 000000000..ce848bc23 --- /dev/null +++ "b/img/icons/\342\230\225\357\270\217.svg" @@ -0,0 +1,9 @@ + + + + + + + + + diff --git "a/img/icons/\342\232\233\357\270\217.svg" "b/img/icons/\342\232\233\357\270\217.svg" new file mode 100644 index 000000000..ade105a8a --- /dev/null +++ "b/img/icons/\342\232\233\357\270\217.svg" @@ -0,0 +1,9 @@ + + + + + + + + + diff --git "a/img/icons/\360\237\220\215.svg" "b/img/icons/\360\237\220\215.svg" new file mode 100644 index 000000000..e206c22de --- /dev/null +++ "b/img/icons/\360\237\220\215.svg" @@ -0,0 +1,9 @@ + + + + + + + + + diff --git "a/img/icons/\360\237\244\226.svg" "b/img/icons/\360\237\244\226.svg" new file mode 100644 index 000000000..50568cda3 --- /dev/null +++ "b/img/icons/\360\237\244\226.svg" @@ -0,0 +1,9 @@ + + + + + + + + + diff --git "a/img/icons/\360\237\246\200.svg" "b/img/icons/\360\237\246\200.svg" new file mode 100644 index 000000000..34ebb806b --- /dev/null +++ "b/img/icons/\360\237\246\200.svg" @@ -0,0 +1,9 @@ + + + + + + + + + diff --git "a/img/icons/\360\237\247\240.svg" "b/img/icons/\360\237\247\240.svg" new file mode 100644 index 000000000..a3e74010c --- /dev/null +++ "b/img/icons/\360\237\247\240.svg" @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json index 22b069c54..dc6a31674 100644 --- a/npm-shrinkwrap.json +++ b/npm-shrinkwrap.json @@ -17,6 +17,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", @@ -5894,6 +5895,51 @@ "react-dom": "^16.8 || ^17.0 || ^18.0" } }, + "node_modules/@radix-ui/react-checkbox": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.0.1.tgz", + "integrity": "sha512-TisH0B8hWmYP3ONRduYCyN04rR9yLPIw/Rwyn1RoC1suSoGCa8Wn+YPdSSSarSszeIbcg3p2lBkDp2XXit4sZw==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.0", + "@radix-ui/react-compose-refs": "1.0.0", + "@radix-ui/react-context": "1.0.0", + "@radix-ui/react-presence": "1.0.0", + "@radix-ui/react-primitive": "1.0.1", + "@radix-ui/react-use-controllable-state": "1.0.0", + "@radix-ui/react-use-previous": "1.0.0", + "@radix-ui/react-use-size": "1.0.0" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + } + }, + "node_modules/@radix-ui/react-checkbox/node_modules/@radix-ui/react-primitive": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.1.tgz", + "integrity": "sha512-fHbmislWVkZaIdeF6GZxF0A/NH/3BjrGIYj+Ae6eTmTCr7EB0RQAAVEiqsXK6p3/JcRqVSBQoceZroj30Jj3XA==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-slot": "1.0.1" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + } + }, + "node_modules/@radix-ui/react-checkbox/node_modules/@radix-ui/react-slot": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.1.tgz", + "integrity": "sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-compose-refs": "1.0.0" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0" + } + }, "node_modules/@radix-ui/react-collection": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.0.tgz", diff --git a/package.json b/package.json index 7b0c643a8..db9b30078 100644 --- a/package.json +++ b/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", diff --git a/stories/atoms/language-pill.stories.tsx b/stories/atoms/language-pill.stories.tsx new file mode 100644 index 000000000..9c1b40aa7 --- /dev/null +++ b/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 = (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" +}; diff --git a/stories/organisms/user-settings-page.stories.tsx b/stories/organisms/user-settings-page.stories.tsx new file mode 100644 index 000000000..2a6e554a3 --- /dev/null +++ b/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 = () => ; + +export const Default = UserSettingsPageTemplate.bind({}); diff --git a/styles/globals.css b/styles/globals.css index 27d3bc04f..393f38204 100644 --- a/styles/globals.css +++ b/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; }