-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'dev' into itttm/update_wallet_bitname
- Loading branch information
Showing
17 changed files
with
3,210 additions
and
447 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| import { ComponentChildren } from "preact"; | ||
| import { | ||
| alignmentClasses, | ||
| type AlignmentType, | ||
| dataLabel, | ||
| dataLabelSm, | ||
| dataValueSm, | ||
| dataValueXl, | ||
| } from "$components/shared/WalletStyles.ts"; | ||
|
|
||
| interface StatBaseProps { | ||
| label: string | ComponentChildren; | ||
| value: string | ComponentChildren; | ||
| align?: AlignmentType; | ||
| } | ||
|
|
||
| interface StatItemProps extends StatBaseProps { | ||
| class?: string; | ||
| href?: string; | ||
| target?: "_blank" | "_self" | "_parent" | "_top"; | ||
| } | ||
|
|
||
| interface StatTitleProps extends StatBaseProps { | ||
| href?: string; | ||
| target?: "_blank" | "_self" | "_parent" | "_top"; | ||
| } | ||
|
|
||
| export function StatItem({ | ||
| label, | ||
| value, | ||
| align = "left", | ||
| class: customClass, | ||
| href, | ||
| target = "_self", | ||
| }: StatItemProps) { | ||
| const alignmentClass = alignmentClasses[align]; | ||
| const content = ( | ||
| <div class={`flex flex-col -space-y-1 ${customClass || ""}`}> | ||
| <p class={`${dataLabelSm} ${alignmentClass}`}> | ||
| {label} | ||
| </p> | ||
| <p | ||
| class={`${dataValueSm} ${alignmentClass} group-hover:text-stamp-purple-bright`} | ||
| > | ||
| {value} | ||
| </p> | ||
| </div> | ||
| ); | ||
|
|
||
| return href | ||
| ? ( | ||
| <a href={href} target={target} class="group"> | ||
| {content} | ||
| </a> | ||
| ) | ||
| : content; | ||
| } | ||
|
|
||
| export function StatTitle({ | ||
| label, | ||
| value, | ||
| align = "left", | ||
| href, | ||
| target = "_self", | ||
| }: StatTitleProps) { | ||
| const alignmentClass = alignmentClasses[align]; | ||
| const content = ( | ||
| <div class="flex flex-col -space-y-1"> | ||
| <p class={`${dataLabel} ${alignmentClass}`}> | ||
| {label} | ||
| </p> | ||
| <p | ||
| class={`${dataValueXl} ${alignmentClass} group-hover:text-stamp-purple-bright`} | ||
| > | ||
| {value} | ||
| </p> | ||
| </div> | ||
| ); | ||
|
|
||
| return href | ||
| ? ( | ||
| <a href={href} target={target} class="group"> | ||
| {content} | ||
| </a> | ||
| ) | ||
| : content; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| // Container styles | ||
| export const backgroundContainer = | ||
| "flex flex-col dark-gradient rounded-lg p-3 mobileMd:p-6"; | ||
|
|
||
| // Data column and layout styles | ||
| export const dataColumn = "flex flex-col -space-y-1"; | ||
|
|
||
| // Text styles - Labels | ||
| export const dataLabelSm = | ||
| "text-sm mobileLg:text-base font-light text-stamp-grey-darker uppercase"; | ||
| export const dataLabel = | ||
| "text-base mobileLg:text-lg font-light text-stamp-grey-darker uppercase"; | ||
| export const dataLabelLg = | ||
| "text-lg mobileLg:text-xl font-light text-stamp-grey-darker uppercase"; | ||
|
|
||
| // Text styles - Values | ||
| export const dataValueXs = | ||
| "text-xs mobileLg:text-sm font-normal text-stamp-grey-light"; | ||
| export const dataValueSm = | ||
| "text-sm mobileLg:text-base font-medium text-stamp-grey-light"; | ||
| export const dataValue = | ||
| "text-base mobileLg:text-lg font-medium text-stamp-grey-light uppercase"; | ||
| export const dataValueLg = | ||
| "text-xl mobileLg:text-2xl font-medium text-stamp-grey-light uppercase"; | ||
| export const dataValueXl = | ||
| "text-3xl mobileLg:text-4xl font-black text-stamp-grey-light"; | ||
|
|
||
| // Title styles | ||
| export const titleGreyDL = | ||
| "inline-block text-3xl mobileMd:text-4xl mobileLg:text-5xl font-black gray-gradient3"; | ||
| export const subTitleGrey = | ||
| "inline-block text-sm mobileMd:text-base mobileLg:text-lg font-medium text-stamp-grey-darker"; | ||
|
|
||
| // Button styles | ||
| export const buttonPurpleFlat = | ||
| "inline-flex items-center justify-center bg-stamp-purple border-2 border-stamp-purple rounded-md text-sm mobileLg:text-base font-extrabold text-black tracking-[0.05em] h-[42px] mobileLg:h-[48px] px-4 mobileLg:px-5 hover:border-stamp-purple-highlight hover:bg-stamp-purple-highlight transition-colors"; | ||
| export const buttonGreyOutline = | ||
| "inline-flex items-center justify-center border-2 border-stamp-grey rounded-md text-sm mobileLg:text-base font-extrabold text-stamp-grey tracking-[0.05em] h-[42px] mobileLg:h-12 px-4 mobileLg:px-5 hover:border-stamp-grey-light hover:text-stamp-grey-light transition-colors"; | ||
|
|
||
| // Tooltip styles | ||
| export const tooltipIcon = | ||
| "absolute left-1/2 -translate-x-1/2 bg-[#000000BF] px-2 py-1 rounded-sm bottom-full text-[10px] mobileLg:text-xs text-stamp-grey-light whitespace-nowrap transition-opacity duration-300"; | ||
|
|
||
| // Header styles | ||
| export const titlePurpleDL = | ||
| "inline-block text-3xl mobileMd:text-4xl mobileLg:text-5xl font-black purple-gradient1"; | ||
|
|
||
| // Alignment utilities | ||
| export const alignmentClasses = { | ||
| left: "text-left", | ||
| center: "text-center", | ||
| right: "text-right", | ||
| } as const; | ||
|
|
||
| // Type for alignment options | ||
| export type AlignmentType = keyof typeof alignmentClasses; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.