diff --git a/packages/fakeyou.com/src/components/common/Button/Button.scss b/packages/fakeyou.com/src/components/common/Button/Button.scss index d5a58e8c67..2b77945926 100644 --- a/packages/fakeyou.com/src/components/common/Button/Button.scss +++ b/packages/fakeyou.com/src/components/common/Button/Button.scss @@ -3,13 +3,14 @@ .button { border-radius: 0.5rem; outline: none; - font-size: 15px; - font-weight: 500; + font-size: 15px !important; + font-weight: 500 !important; padding: 10px 20px; z-index: 2; display: flex; align-items: center; justify-content: center; + color: $white !important; } .button-primary, @@ -19,19 +20,19 @@ border: 2.5px solid; border-color: $primary; transition: 0.2s; - color: $white; + color: $white !important; } .button-primary:hover { background-color: lighten($primary, 5%); border-color: lighten($primary, 5%); - color: $white; + color: $white !important; } .button-secondary, .button-secondary:focus, .button-secondary:active { background-color: $secondary; - color: $white; + color: $white !important; border: 2.5px solid; border-color: $secondary; transition: 0.2s; @@ -39,7 +40,7 @@ .button-secondary:hover { background-color: lighten($secondary, 5%); - color: $white; + color: $white !important; border: 2.5px solid; border-color: lighten($secondary, 5%); } @@ -48,7 +49,7 @@ .button-destructive:focus, .button-destructive:active { background-color: $danger; - color: $white; + color: $white !important; border: 2.5px solid; border-color: $danger; transition: 0.2s; @@ -56,7 +57,7 @@ .button-destructive:hover { background-color: lighten($danger, 5%); - color: $white; + color: $white !important; border: 2.5px solid; border-color: lighten($danger, 5%); } @@ -65,7 +66,7 @@ .button-small:focus, .button-small:active { font-weight: 500; - font-size: 14px; + font-size: 14px !important; padding: 8.25px 16px; transition: 0.2s; border: none; diff --git a/packages/fakeyou.com/src/components/common/Button/Button.tsx b/packages/fakeyou.com/src/components/common/Button/Button.tsx index 188ca25bac..b67196aa13 100644 --- a/packages/fakeyou.com/src/components/common/Button/Button.tsx +++ b/packages/fakeyou.com/src/components/common/Button/Button.tsx @@ -1,4 +1,5 @@ import React, { ButtonHTMLAttributes } from "react"; +import { Link } from "react-router-dom"; import "./Button.scss"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { IconDefinition } from "@fortawesome/fontawesome-svg-core"; @@ -7,29 +8,68 @@ interface ButtonProps extends ButtonHTMLAttributes { label?: string; icon?: IconDefinition; small?: boolean; - secondary?: boolean; - danger?: boolean; + variant?: "primary" | "secondary" | "danger"; + to?: string; // for internal links + href?: string; // for external links + target?: "_blank" | "_self"; } export default function Button({ label, icon, small, - secondary, - danger, + variant = "primary", + to, + href, + target = "_self", ...rest }: ButtonProps) { - const buttonClasses = `button ${small ? "button-small" : ""} - ${ - secondary - ? "button-secondary" - : danger - ? "button-destructive" - : "button-primary" - } `; + let buttonClass = `button`; + if (small) { + buttonClass += ` button-small`; + } + + switch (variant) { + case "primary": + buttonClass += " button-primary"; + break; + case "secondary": + buttonClass += " button-secondary"; + break; + case "danger": + buttonClass += " button-destructive"; + break; + default: + buttonClass += " button-primary"; + break; + } + + if (to) { + return ( + + {icon && } + {label} + + ); + } + if (href) { + return ( + + {icon && } + {label} + + ); + } + + // If neither 'to' nor 'href' are provided (regular button) return ( - diff --git a/packages/fakeyou.com/src/components/common/Button/index.tsx b/packages/fakeyou.com/src/components/common/Button/index.tsx new file mode 100644 index 0000000000..c4719be7c0 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/Button/index.tsx @@ -0,0 +1 @@ +export { default } from "./Button"; diff --git a/packages/fakeyou.com/src/components/common/CheckableTag/CheckableTag.scss b/packages/fakeyou.com/src/components/common/CheckableTag/CheckableTag.scss new file mode 100644 index 0000000000..f75c658315 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/CheckableTag/CheckableTag.scss @@ -0,0 +1,39 @@ +@import "scss/colours.scss"; + +.checkable-tag { + font-weight: 500; + border-radius: 0.5rem; + font-size: 13px; + padding: 9px 12px; + background-color: $secondary; + color: $white; + cursor: pointer; + transition: 0.2s; + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + border: 2px solid $secondary; + + &.checked { + background-color: lighten($secondary, 10%) !important; + color: $white; + border: 2px solid $primary !important; + } + + .remove-icon { + align-items: center; + font-size: 14px; + transition: 0.2s; + } + + &:hover { + background-color: lighten($secondary, 5%); + border: 2px solid lighten($secondary, 5%); + } + + &:hover > .remove-icon { + color: $primary; + } +} diff --git a/packages/fakeyou.com/src/components/common/CheckableTag/CheckableTag.tsx b/packages/fakeyou.com/src/components/common/CheckableTag/CheckableTag.tsx new file mode 100644 index 0000000000..6de7495d0a --- /dev/null +++ b/packages/fakeyou.com/src/components/common/CheckableTag/CheckableTag.tsx @@ -0,0 +1,26 @@ +import React from "react"; +import "./CheckableTag.scss"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faXmark } from "@fortawesome/pro-solid-svg-icons"; + +interface Props { + tag: string; + isSelected: boolean; + onToggle: (tag: string) => void; +} + +export default function CheckableTag({ tag, isSelected, onToggle }: Props) { + return ( +
onToggle(tag)} + > + {tag} + {isSelected && ( + + )} +
+ ); +} diff --git a/packages/fakeyou.com/src/components/common/CheckableTag/index.tsx b/packages/fakeyou.com/src/components/common/CheckableTag/index.tsx new file mode 100644 index 0000000000..877c50fb3c --- /dev/null +++ b/packages/fakeyou.com/src/components/common/CheckableTag/index.tsx @@ -0,0 +1 @@ +export { default } from "./CheckableTag"; diff --git a/packages/fakeyou.com/src/components/common/Input/Input.tsx b/packages/fakeyou.com/src/components/common/Input/Input.tsx new file mode 100644 index 0000000000..4697f07970 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/Input/Input.tsx @@ -0,0 +1,24 @@ +import React from "react"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { IconDefinition } from "@fortawesome/fontawesome-svg-core"; + +interface InputProps extends React.InputHTMLAttributes { + icon?: IconDefinition; + label?: string; + textArea?: boolean; +} + +export default function Input({ label, icon, textArea, ...rest }: InputProps) { + return ( +
+ {label && } + +
+ {icon && ( + + )} + +
+
+ ); +} diff --git a/packages/fakeyou.com/src/components/common/Input/index.tsx b/packages/fakeyou.com/src/components/common/Input/index.tsx new file mode 100644 index 0000000000..a50d7d110e --- /dev/null +++ b/packages/fakeyou.com/src/components/common/Input/index.tsx @@ -0,0 +1 @@ +export { default } from "./Input"; diff --git a/packages/fakeyou.com/src/components/common/ModelSearch/ModelSearch.tsx b/packages/fakeyou.com/src/components/common/ModelSearch/ModelSearch.tsx new file mode 100644 index 0000000000..58c00308f0 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/ModelSearch/ModelSearch.tsx @@ -0,0 +1,20 @@ +import React from "react"; +import Input from "../Input"; +import { faSearch } from "@fortawesome/pro-solid-svg-icons"; + +interface Props { + value: string; + onChange: (value: string) => void; +} + +export default function ModelSearch({ value, onChange }: Props) { + return ( + onChange(e.target.value)} + placeholder="Search..." + /> + ); +} diff --git a/packages/fakeyou.com/src/components/common/ModelSearch/dummyData.ts b/packages/fakeyou.com/src/components/common/ModelSearch/dummyData.ts new file mode 100644 index 0000000000..236d5c8acb --- /dev/null +++ b/packages/fakeyou.com/src/components/common/ModelSearch/dummyData.ts @@ -0,0 +1,4 @@ +export const dummyData = [ + { id: 1, name: "Item 1", tags: ["tag1", "tag2"] }, + { id: 2, name: "Item 2", tags: ["tag2", "tag3"] }, +]; diff --git a/packages/fakeyou.com/src/components/common/ModelSearch/index.tsx b/packages/fakeyou.com/src/components/common/ModelSearch/index.tsx new file mode 100644 index 0000000000..e557975288 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/ModelSearch/index.tsx @@ -0,0 +1 @@ +export { default } from "./ModelSearch"; diff --git a/packages/fakeyou.com/src/components/common/ModelSearchResults/ModelSearchResults.scss b/packages/fakeyou.com/src/components/common/ModelSearchResults/ModelSearchResults.scss new file mode 100644 index 0000000000..3a931215d3 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/ModelSearchResults/ModelSearchResults.scss @@ -0,0 +1,29 @@ +@import "scss/colours.scss"; + +.model-search-results { + background-color: lighten($panel, 6%); + border-radius: 0.5rem; + border: 1px solid lighten($panel, 12%); + + .type-tag { + font-weight: 600; + border-radius: 0.4rem; + font-size: 13px; + padding: 4px 8px; + background-color: $secondary; + color: $white; + cursor: pointer; + transition: 0.2s; + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + height: 100%; + + &.tt2 { + color: #494ea9; + background-color: #c6c7e1; + } + } +} diff --git a/packages/fakeyou.com/src/components/common/ModelSearchResults/ModelSearchResults.tsx b/packages/fakeyou.com/src/components/common/ModelSearchResults/ModelSearchResults.tsx new file mode 100644 index 0000000000..d0670d0450 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/ModelSearchResults/ModelSearchResults.tsx @@ -0,0 +1,28 @@ +import React from "react"; +import "./ModelSearchResults.scss"; + +interface Props { + data: any[]; +} + +export default function ModelSearchResults({ data }: Props) { + return ( +
+ {data.map((item) => ( +
+
+
{item.name}
+

by {item.creator}

+ + {item.type} + +
+
+ ))} +
+ ); +} diff --git a/packages/fakeyou.com/src/components/common/ModelSearchResults/index.tsx b/packages/fakeyou.com/src/components/common/ModelSearchResults/index.tsx new file mode 100644 index 0000000000..e1326737cc --- /dev/null +++ b/packages/fakeyou.com/src/components/common/ModelSearchResults/index.tsx @@ -0,0 +1 @@ +export { default } from "./ModelSearchResults"; diff --git a/packages/fakeyou.com/src/components/common/ModelTags/ModelTags.tsx b/packages/fakeyou.com/src/components/common/ModelTags/ModelTags.tsx new file mode 100644 index 0000000000..b2b464bd65 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/ModelTags/ModelTags.tsx @@ -0,0 +1,23 @@ +import React from "react"; +import CheckableTag from "../CheckableTag"; + +interface Props { + tags: string[]; + selectedTags: string[]; + onSelectTag: (tag: string) => void; +} + +export default function ModelTags({ tags, selectedTags, onSelectTag }: Props) { + return ( +
+ {tags.map((tag) => ( + + ))} +
+ ); +} diff --git a/packages/fakeyou.com/src/components/common/ModelTags/index.tsx b/packages/fakeyou.com/src/components/common/ModelTags/index.tsx new file mode 100644 index 0000000000..1719f41058 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/ModelTags/index.tsx @@ -0,0 +1 @@ +export { default } from "./ModelTags"; diff --git a/packages/fakeyou.com/src/components/common/Panel/index.tsx b/packages/fakeyou.com/src/components/common/Panel/index.tsx new file mode 100644 index 0000000000..76888ed957 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/Panel/index.tsx @@ -0,0 +1 @@ +export { default } from "./Panel"; diff --git a/packages/fakeyou.com/src/components/common/Select/Select.scss b/packages/fakeyou.com/src/components/common/Select/Select.scss new file mode 100644 index 0000000000..2ffb214fb9 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/Select/Select.scss @@ -0,0 +1,68 @@ +@import "scss/colours.scss"; + +.select__control { + &.select { + height: 48px; + border-width: 2px; + padding-left: 0.15rem; + padding-right: 0.15rem; + background-color: $input-dark; + border-radius: 0.5rem; + border-color: $input-dark !important; + box-shadow: none; + cursor: pointer; + + &.no-padding { + padding-left: 0.5rem; + } + + &:hover { + background-color: lighten($input-dark, 5%); + border-color: lighten($input-dark, 5%) !important; + } + + &.focused { + border-color: $primary !important; + } + + &.with-icon { + padding-left: 2rem; + } + + &.rounded-full { + border-radius: 50px; + } + } + + .select-option { + background-color: $input-dark; + cursor: pointer; + padding: 0.5rem 1rem; + + &:hover { + background-color: lighten($input-dark, 8%); + } + } + + .select-input, + .select-value { + color: $white; + } + + .select-container { + background: $input-dark; + margin-top: 6px; + padding: 0; + border-radius: 0.5rem; + z-index: 3; + } + + .select-separator { + width: 1px; + opacity: 0.3; + } + + .select-placeholder { + color: rgba($white, 0.5) !important; + } +} diff --git a/packages/fakeyou.com/src/components/common/Select/Select.tsx b/packages/fakeyou.com/src/components/common/Select/Select.tsx new file mode 100644 index 0000000000..a52c07f79a --- /dev/null +++ b/packages/fakeyou.com/src/components/common/Select/Select.tsx @@ -0,0 +1,53 @@ +import React from "react"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { IconDefinition } from "@fortawesome/fontawesome-svg-core"; +import "./Select.scss"; +import { + default as ReactSelect, + Props as ReactSelectProps, +} from "react-select"; + +interface SelectProps extends ReactSelectProps { + icon?: IconDefinition; + label?: string; + rounded?: boolean; +} + +export default function Select({ label, icon, rounded, ...rest }: SelectProps) { + const SelectFieldClass = { + control: (state: any) => + state.isFocused + ? `select focused ${icon && "with-icon"} ${rounded && "rounded-full"}` + : `select ${icon && "with-icon"} ${rounded && "rounded-full"}`, + option: (state: any) => + state.isFocused ? "select-option" : "select-option", + input: (state: any) => (state.isFocused ? "select-input" : "select-input"), + placeholder: (state: any) => + state.isFocused ? "select-placeholder" : "select-placeholder", + singleValue: (state: any) => + state.isFocused ? "select-value" : "select-value", + menu: (state: any) => + state.isFocused ? "select-container" : "select-container", + indicatorSeparator: (state: any) => + state.isFocused ? "select-separator" : "select-separator", + }; + + return ( +
+ {label && } + +
+ {icon && ( + + )} +
+ +
+
+
+ ); +} diff --git a/packages/fakeyou.com/src/components/common/Select/index.tsx b/packages/fakeyou.com/src/components/common/Select/index.tsx new file mode 100644 index 0000000000..cd39325ed3 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/Select/index.tsx @@ -0,0 +1 @@ +export { default } from "./Select"; diff --git a/packages/fakeyou.com/src/components/common/ShareButton/ShareButton.tsx b/packages/fakeyou.com/src/components/common/ShareButton/ShareButton.tsx index a5501655b7..ed1fe885d2 100644 --- a/packages/fakeyou.com/src/components/common/ShareButton/ShareButton.tsx +++ b/packages/fakeyou.com/src/components/common/ShareButton/ShareButton.tsx @@ -35,8 +35,8 @@ export default function ShareButton(props: ShareButtonProps) {