daniel543x/artcraft
1
0 Fork 0
mirror of https://github.com/storytold/artcraft.git synced 2026-11-04 17:38:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

top and bottom buttons styling

Browse Source
This commit is contained in:
BFlat committed 2024-03-24 17:09:48 +07:00
1 parent 82e49b48e5
commit c50c843444
9 files changed
+141 -46
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/components/ButtonIcon.tsx
+17 -18
View File
@@ -1,28 +1,27 @@
// ButtonIcon.tsx
import React from "react";
import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
import {
FontAwesomeIcon,
FontAwesomeIconProps,
} from "@fortawesome/react-fontawesome";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
export interface ButtonIconPropsI
extends React.ButtonHTMLAttributes<HTMLButtonElement> {
interface ButtonIconProps {
icon: IconDefinition;
iconClass?: string;
iconProps?: FontAwesomeIconProps;
fill?: boolean;
onClick: () => void;
}
export const ButtonIcon = ({
const ButtonIcon: React.FC<ButtonIconProps> = ({
icon,
iconClass,
iconProps,
className: propsClassName,
...rest
}: ButtonIconPropsI) => {
onClick,
fill = false,
}) => {
return (
<button className={propsClassName} {...rest}>
{icon && (
<FontAwesomeIcon {...iconProps} className={iconClass} icon={icon} />
)}
<button
className={`flex h-8 w-8 items-center justify-center rounded-lg transition-all duration-150 hover:bg-ui-panel/[0.4] ${fill ? "bg-ui-controls-button hover:bg-ui-controls-button/[0.75]" : "bg-transparent"}`}
onClick={onClick}
>
<FontAwesomeIcon icon={icon} />
</button>
);
};
export { ButtonIcon };
app/components/ButtonIconSelect.tsx
+44
View File
@@ -0,0 +1,44 @@
// ButtonIconSelect.tsx
import { useState } from "react";
import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
interface Option {
value: string;
icon: IconDefinition;
}
interface ButtonIconSelectProps {
options: Option[];
onOptionChange?: (value: string) => void;
}
export function ButtonIconSelect({
options,
onOptionChange,
}: ButtonIconSelectProps) {
const [selectedOption, setSelectedOption] = useState<string>(
options[0].value,
);
const handleOptionChange = (value: string) => {
setSelectedOption(value);
if (onOptionChange) {
onOptionChange(value);
}
};
return (
<div className="flex space-x-1">
{options.map(({ value, icon }) => (
<button
key={value}
className={`flex h-8 w-8 items-center justify-center transition-all duration-150 hover:bg-ui-panel/[0.4] ${selectedOption === value ? "border-2 border-brand-primary bg-ui-panel/[0.2]" : "border-2 border-transparent"} rounded-lg`}
onClick={() => handleOptionChange(value)}
>
<FontAwesomeIcon icon={icon} />
</button>
))}
</div>
);
}
app/components/index.tsx
+2 -5
View File
@@ -1,9 +1,6 @@
import { Button } from "./Button";
import { ButtonIcon } from "./ButtonIcon";
import { ButtonLink } from "./ButtonLink";
import { ButtonIconSelect } from "./ButtonIconSelect";
export {
Button,
ButtonIcon,
ButtonLink,
};
export { Button, ButtonIcon, ButtonLink, ButtonIconSelect };
app/contexts/ButtonSelectContext.tsx
+31
View File
@@ -0,0 +1,31 @@
import React, { createContext, useContext, useState } from "react";
interface ButtonSelectContextType {
selectedButton: number | null;
setSelectedButton: (index: number | null) => void;
}
const ButtonSelectContext = createContext<ButtonSelectContextType | undefined>(
undefined,
);
export const ButtonSelectProvider: React.FC = ({ children }) => {
const [selectedButton, setSelectedButton] = useState<number | null>(null);
return (
<ButtonSelectContext.Provider value={{ selectedButton, setSelectedButton }}>
{children}
</ButtonSelectContext.Provider>
);
};
// Custom hook to use the context
export const useButtonSelect = () => {
const context = useContext(ButtonSelectContext);
if (context === undefined) {
throw new Error(
"useButtonSelect must be used within a ButtonSelectProvider",
);
}
return context;
};
app/modules/Tabs/Tabs.tsx
+1 -1
View File
@@ -15,7 +15,7 @@ export const Tabs = ({ tabs: tabProps }: { tabs: TabType[] }) => {
"px-4 py-4 text-md font-medium leading-5 focus:outline-none transition duration-150 ease-in-out border-b-[3px] border-white/[.1]",
selected
? "text-white border-brand-primary"
: "text-gray-400 hover:text-white hover:border-white/[.3]",
: "text-white/[0.5] hover:text-white hover:border-white/[.3]",
);
return (
app/pages/PageEnigma/PageEnigma.tsx
+1 -1
View File
@@ -130,7 +130,7 @@ export const PageEnigma = () => {
</div>
{/* Side panel */}
<div>
<div className="border-l border-l-ui-panel-border">
<Tabs
tabs={[
{
app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx
+41 -18
View File
@@ -9,8 +9,7 @@ import {
fa3dTorus,
fa3dSphere,
} from "@awesome.me/kit-fde2be5eb0/icons/kit/custom";
import { ButtonIcon } from "~/components";
import { ButtonIcon, ButtonIconSelect } from "~/components";
export const Controls3D = () => {
const handlePlus = () => {
@@ -34,25 +33,49 @@ export const Controls3D = () => {
const handleZoomArrows = () => {
console.log("Controls 3D: Zoom Arrows clicked");
};
const handleModeChange = (value: string) => {
switch (value) {
case "move":
handleMoveArrows();
break;
case "rotate":
handleRotateArrows();
break;
case "scale":
handleZoomArrows();
break;
default:
console.log("Unknown option");
}
};
const modes = [
{ value: "move", icon: faArrowsUpDownLeftRight },
{ value: "rotate", icon: faArrowsRotate },
{ value: "scale", icon: faUpRightAndDownLeftFromCenter },
];
return (
<div>
<div className="flex justify-center">
<div className="bg-ui-controls rounded-b-md border-x border-b border-ui-panel-border px-4 py-2 text-white">
<div className="flex gap-4">
<ButtonIcon icon={faPlus} onClick={handlePlus} />
<span className="w-0 border-l border-white/[0.1]" />
<ButtonIcon icon={fa3dCylinder} onClick={handleCylinder} />
<ButtonIcon icon={fa3dTorus} onClick={handleTorus} />
<ButtonIcon icon={fa3dSphere} onClick={handleSphere} />
<span className="w-0 border-l border-white/[0.1]" />
<ButtonIcon
icon={faArrowsUpDownLeftRight}
onClick={handleMoveArrows}
/>
<ButtonIcon icon={faArrowsRotate} onClick={handleRotateArrows} />
<ButtonIcon
icon={faUpRightAndDownLeftFromCenter}
onClick={handleZoomArrows}
<div className="rounded-b-lg border-x border-b border-ui-panel-border bg-ui-controls p-2 text-white">
<div className="flex items-center justify-center gap-2">
<ButtonIcon icon={faPlus} onClick={handlePlus} fill={true} />
<span className="h-4 w-0 border-l border-white/[0.15]" />
<div className="flex gap-1">
<ButtonIcon icon={fa3dCylinder} onClick={handleCylinder} />
<ButtonIcon icon={fa3dTorus} onClick={handleTorus} />
<ButtonIcon icon={fa3dSphere} onClick={handleSphere} />
</div>
<span className="h-4 w-0 border-l border-white/[0.15]" />
<ButtonIconSelect
options={modes}
onOptionChange={handleModeChange}
/>
</div>
</div>
app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx
+3 -3
View File
@@ -26,11 +26,11 @@ export const ControlsVideo = () => {
return (
<div>
<div className="flex justify-center">
<div className="bg-ui-controls -mt-10 rounded-t-md border-x border-t border-ui-panel-border px-6 py-2 text-white">
<div className="flex content-center gap-6 ">
<div className="rounded-t-lg border-x border-t border-ui-panel-border bg-ui-controls p-2 text-white">
<div className="flex content-center gap-2">
<ButtonIcon icon={faBackwardFast} onClick={handleBackwardFast} />
<ButtonIcon icon={faBackwardStep} onClick={handleBackwardStep} />
<ButtonIcon className="h-6" icon={faPlay} onClick={handlePlay} />
<ButtonIcon icon={faPlay} onClick={handlePlay} />
<ButtonIcon icon={faForwardStep} onClick={handleForwardStep} />
<ButtonIcon icon={faForwardFast} onClick={handleForwardFast} />
</div>
tailwind.config.ts
+1
View File
@@ -83,6 +83,7 @@ export default {
"ui-panel": "#242433",
"ui-panel-border": "#393948",
"ui-controls": "#39394D",
"ui-controls-button": "#676781",
gray: colors.gray,
white: colors.white,