Skip to content

Commit

Permalink
add(front): modal, hero, select, tabs/tags, pagination #9 (#19)
Browse files Browse the repository at this point in the history 
* change secondary to main

* change pagination

* change Select & tabs

* change modal

* change Hero + connect wallet and search results modals

* lint

* fix lint

* change import

* lint
  • Loading branch information
@indaviande
indaviande authored Dec 9, 2024
1 parent 88d1106 commit a838d80
Show file tree
Hide file tree
Showing 11 changed files with 130 additions and 108 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ import { tv } from 'tailwind-variants'

export const buttonStyles = tv({
base:
'text-main-11 flex items-center gap-1 border-1 outline-offset-0 outline-0 text-nowrap',
'text-main-11 flex items-center border-1 outline-offset-0 outline-0 text-nowrap',
variants: {
look: {
base:
Expand Down
2 changes: 1 addition & 1 deletion src/components/dapp/WalletButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export default function WalletButton(props: ButtonProps) {

if (!connected)
return (
<Modal title="Connect Wallet" className="mx-auto w-full max-w-[500px]" modal={<WalletConnectors />}>
<Modal title="CONNECT WALLET" className="mx-auto w-full max-w-[500px]" modal={<WalletConnectors />}>
<Button look="hype" size="lg" {...props}>
Connect wallet
</Button>
Expand Down
2 changes: 1 addition & 1 deletion src/components/extenders/Modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export default function Modal({ state, title, description, modal, children, clas
<Dialog.Content
style={vars}
className={mergeClass("fixed top-1/2 left-1/2 z-50 -translate-x-1/2 -translate-y-1/2", className)}>
<Box size="xl" className="shadow-md" {...props}>
<Box size="xl" className="!p-md*4 lg:!p-lg*4 shadow-md" {...props}>
{title && (
<Dialog.Title asChild={!!title}>
{typeof title === "string" ? <Title h={3}>{title}</Title> : title}
Expand Down
32 changes: 17 additions & 15 deletions src/components/extenders/Select.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import Group from "./Group";

export const selectStyles = tv({
base: [
"text-main-11 rounded-sm flex items-center dim focus-visible:outline-main-12 !leading-none justify-between gap-1 text-nowrap font-text font-semibold",
"text-main-11 rounded-sm flex items-center dim focus-visible:outline-main-12 !leading-none justify-between text-nowrap font-text font-semibold",
],
slots: {
dropdown: "outline-0 z-50 origin-top animate-drop animate-stretch mt-sm min-w-[var(--popover-anchor-width)]",
Expand All @@ -27,26 +27,26 @@ export const selectStyles = tv({
variants: {
look: {
soft: {
base: "bg-main-0 border-main-9 active:text-main-12 text-main-11",
base: "bg-main-0 active:text-main-12 text-main-11",
icon: "border-main-0",
item: "hover:bg-main-5 data-[active-item]:bg-main-5 active:bg-main-4 text-main-12",
},
base: {
base: "bg-main-0 border-main-9 border-1 active:text-main-12 text-main-11",
icon: "border-main-0",
item: "hover:bg-main-5 data-[active-item]:bg-main-5 active:bg-main-4 text-main-12",
},
bold: {
base: "bg-main-1 active:text-main-12 text-main-11",
icon: "",
item: "hover:bg-main-5 data-[active-item]:bg-main-5 active:bg-main-4 text-main-12",
check: "text-accent-10",
},
bold: {
tint: {
base: "bg-main-5 active:text-main-12 text-main-11",
icon: "",
item: "hover:bg-main-3 data-[active-item]:bg-main-6 active:bg-main-5 text-main-12",
},
tint: {
base: "bg-main-8 active:text-main-12 text-main-11",
icon: "",
item: "hover:bg-accent-6 data-[active-item]:bg-accent-6 active:bg-accent-5 text-main-12",
},
hype: {
base: "bg-accent-5 active:text-main-12 text-accent-11",
icon: "",
Expand All @@ -55,35 +55,35 @@ export const selectStyles = tv({
},
size: {
xs: {
base: "text-xs",
base: "gap-xs text-xs",
value: "px-sm*2 py-xs*2",
icon: "text-sm",
item: "px-md text-xs",
prefixLabel: "text-xs",
},
sm: {
base: "text-sm",
base: "gap-sm text-sm",
value: "px-md py-sm",
icon: "text-base",
item: "px-md text-sm",
prefixLabel: "text-sm",
},
md: {
base: "text-md",
base: "gap-md text-md",
value: "px-md text-md py-md",
icon: "text-lg",
item: "px-md text-md",
prefixLabel: "text-sm",
},
lg: {
base: "text-lg",
base: "gap-lg text-lg",
value: "px-xl/2 py-lg",
icon: "text-xl",
item: "px-lg text-lg",
prefixLabel: "text-base",
},
xl: {
base: "text-xl",
base: "gap-xl text-xl",
value: "px-sm*2 py-lg",
icon: "text-xl",
item: "px-xl text-xl",
Expand Down Expand Up @@ -263,8 +263,10 @@ export default function Select<
{allOption && !searchInput && (
<Ariakit.SelectItem
className={mergeClass(item())}
// biome-ignore lint/suspicious/noExplicitAny: template makes this typing difficult even tough it works
onClick={() => setValue((!!multiple ? [] : undefined) as any as Value)}
onClick={() =>
// biome-ignore lint/suspicious/noExplicitAny: template makes this typing difficult even tough it works
setValue((!!multiple ? [] : undefined) as any as Value)
}
render={
<Ariakit.ComboboxItem
children={[
Expand Down
101 changes: 52 additions & 49 deletions src/components/primitives/Box.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,58 +4,61 @@ import { mergeClass } from "../../utils/css";
import { sizeScale } from "../../utils/tailwind";
import type { Component, Styled, Themable } from "../../utils/types";

export const boxStyles = tv({
base: "flex flex-col border-1 gap-1",
variants: {
look: {
soft: "bg-main-1 border-main-0",
base: "bg-main-3 border-main-0 text-main-12",
bold: "bg-main-2 border-main-6 text-main-12",
tint: "bg-accent-4 border-main-0 text-main-12",
hype: "bg-accent-4 border-accent-6 text-main-12",
},
size: {
xs: "p-xs gap-xs",
sm: "p-sm gap-sm",
md: "p-md gap-md",
lg: "p-lg gap-md",
xl: "p-xl gap-xl",
},
container: {
true: "",
false: "",
export const boxStyles = tv(
{
base: "flex flex-col border-1",
variants: {
look: {
soft: "bg-main-1 border-main-0",
base: "bg-main-3 border-main-0 text-main-12",
bold: "bg-main-2 border-main-6 text-main-12",
tint: "bg-accent-4 border-main-0 text-main-12",
hype: "bg-accent-4 border-accent-6 text-main-12",
},
size: {
xs: "p-xs gap-xs",
sm: "p-sm gap-sm",
md: "p-md gap-md",
lg: "p-lg gap-md",
xl: "p-xl gap-xl",
},
container: {
true: "",
false: "",
},
content: {
xs: "",
sm: "",
md: "",
lg: "",
xl: "",
},
},
content: {
xs: "",
sm: "",
md: "",
lg: "",
xl: "",
defaultVariants: {
size: "md",
content: "md",
look: "base",
container: true,
},
compoundVariants: sizeScale.flatMap(size =>
sizeScale.flatMap(content => [
{
size,
content,
container: true as const,
class: `rounded-${size}+${content}` as `rounded-${typeof size}+${typeof content}`,
},
{
size,
content,
container: false as const,
class: `rounded-${size}` as `rounded-${typeof size}`,
},
]),
),
},
defaultVariants: {
size: "md",
content: "md",
look: "base",
container: true,
},
compoundVariants: sizeScale.flatMap(size =>
sizeScale.flatMap(content => [
{
size,
content,
container: true as const,
class: `rounded-${size}+${content}` as `rounded-${typeof size}+${typeof content}`,
},
{
size,
content,
container: false as const,
class: `rounded-${size}` as `rounded-${typeof size}`,
},
]),
),
});
{ twMerge: false },
);

export type BoxProps = Component<Styled<typeof boxStyles> & Themable>;

Expand Down
2 changes: 1 addition & 1 deletion src/components/primitives/Icon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import type { Component, Styled } from "../..";
import Image from "./Image";

export const iconStyles = tv({
base: "flex flex-col border-0 gap-1 overflow-hidden self-center rounded-sm w-[calc(1em+2px)] h-[calc(1em+2px)]",
base: "flex flex-col border-0 overflow-hidden self-center rounded-sm w-[1em] h-[1em]",
variants: {
size: {
xs: "",
Expand Down
2 changes: 1 addition & 1 deletion src/components/primitives/Input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import type { Component, GetSet, Styled } from "../../utils/types";
import Group from "../extenders/Group";

export const inputStyles = tv({
base: "text-main-12 flex items-center gap-1 text-nowrap font-text",
base: "text-main-12 flex items-center text-nowrap font-text",
variants: {
look: {
none: "bg-main-0 border-0",
Expand Down
2 changes: 1 addition & 1 deletion src/components/primitives/Slider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import type { Component, GetSet, Styled } from "../../utils/types";

export const sliderStyles = tv({
base: [
"relative text-main-11 flex items-center justify-between gap-1 border-1 outline-offset-0 outline-0 text-nowrap font-text font-bold",
"relative text-main-11 flex items-center justify-between border-1 outline-offset-0 outline-0 text-nowrap font-text font-bold",
],
slots: {
thumb: "aspect-square text-xs border-1 bg-main-4 mt-sm shadow-md font-text font-normal",
Expand Down
Loading

0 comments on commit a838d80

Please sign in to comment.