Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add(front): modal, hero, select, tabs/tags, pagination #9 #19

Merged
merged 9 commits into from
Dec 9, 2024
Merged

add(front): modal, hero, select, tabs/tags, pagination #9 #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
0da60ca
change secondary to main
indaviande Dec 9, 2024
28fbe39
change pagination
indaviande Dec 9, 2024
1aae3e5
change Select & tabs
indaviande Dec 9, 2024
19d3b2c
change modal
indaviande Dec 9, 2024
931d0a3
change Hero + connect wallet and search results modals
indaviande Dec 9, 2024
653fb26
lint
indaviande Dec 9, 2024
737fa91
fix lint
indaviande Dec 9, 2024
cbbd1be
change import
indaviande Dec 9, 2024
7386f78
lint
indaviande Dec 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading