mirror of
https://github.com/billsonnn/nitro-react.git
synced 2025-01-18 13:26:27 +01:00
Add ltd stuff
This commit is contained in:
Bill
parent
d416c82741
commit
4e848fd3f5
224
src/index.css
224
src/index.css
@ -75,18 +75,27 @@ body {
|
||||
}
|
||||
|
||||
@layer components {
|
||||
|
||||
@keyframes blink {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes scale {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.5); }
|
||||
}
|
||||
|
||||
.dot {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scale {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
.dot {
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
@ -117,7 +126,7 @@ body {
|
||||
position: absolute;
|
||||
background-color: currentColor;
|
||||
|
||||
&:nth-child(1){
|
||||
&:nth-child(1) {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 1px;
|
||||
@ -137,7 +146,8 @@ body {
|
||||
|
||||
.connecting-duck {
|
||||
@apply absolute inset-0 m-auto;
|
||||
background: url('@/assets/images/loading/connecting-duck-spritesheet.png') no-repeat top left;
|
||||
background: url("@/assets/images/loading/connecting-duck-spritesheet.png")
|
||||
no-repeat top left;
|
||||
width: 235px;
|
||||
height: 127px;
|
||||
animation: connecting-duck 1.5s infinite step-end;
|
||||
@ -146,42 +156,42 @@ body {
|
||||
|
||||
@keyframes connecting-duck {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
width: 235px;
|
||||
height: 127px;
|
||||
background-position: 0 0;
|
||||
width: 235px;
|
||||
height: 127px;
|
||||
}
|
||||
15% {
|
||||
background-position: 0 -132px;
|
||||
width: 280px;
|
||||
height: 151px;
|
||||
background-position: 0 -132px;
|
||||
width: 280px;
|
||||
height: 151px;
|
||||
}
|
||||
30% {
|
||||
background-position: 0 -288px;
|
||||
width: 326px;
|
||||
height: 174px;
|
||||
background-position: 0 -288px;
|
||||
width: 326px;
|
||||
height: 174px;
|
||||
}
|
||||
45% {
|
||||
background-position: 0 -467px;
|
||||
width: 235px;
|
||||
height: 127px;
|
||||
background-position: 0 -467px;
|
||||
width: 235px;
|
||||
height: 127px;
|
||||
}
|
||||
60% {
|
||||
background-position: 0 -599px;
|
||||
width: 280px;
|
||||
height: 151px;
|
||||
background-position: 0 -599px;
|
||||
width: 280px;
|
||||
height: 151px;
|
||||
}
|
||||
75% {
|
||||
background-position: 0 -755px;
|
||||
width: 326px;
|
||||
height: 174px;
|
||||
background-position: 0 -755px;
|
||||
width: 326px;
|
||||
height: 174px;
|
||||
}
|
||||
90% {
|
||||
background-position: 0 -934px;
|
||||
width: 190px;
|
||||
height: 104px;
|
||||
background-position: 0 -934px;
|
||||
width: 190px;
|
||||
height: 104px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.avatar-image {
|
||||
@apply pointer-events-none relative h-[130px] w-[90px] bg-[center_-8px] bg-no-repeat;
|
||||
}
|
||||
@ -821,3 +831,147 @@ body {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.unique-item {
|
||||
.unique-bg-override {
|
||||
@apply z-[2] bg-center bg-no-repeat;
|
||||
}
|
||||
|
||||
&:before {
|
||||
@apply absolute z-[1] size-full bg-center bg-no-repeat [content:""];
|
||||
background-image: url("@/assets/images/unique/grid-bg.png");
|
||||
}
|
||||
|
||||
&:after {
|
||||
@apply absolute bottom-0 z-[4] size-full bg-center bg-no-repeat [content:""];
|
||||
background-image: url("@/assets/images/unique/grid-bg-glass.png");
|
||||
}
|
||||
|
||||
&.sold-out:after {
|
||||
@apply bg-center bg-no-repeat;
|
||||
background-image: url("@/assets/images/unique/grid-bg-sold-out.png"),
|
||||
url("@/assets/images/unique/grid-bg-glass.png");
|
||||
}
|
||||
|
||||
.unique-item-counter {
|
||||
background-image: url("@/assets/images/unique/grid-count-bg.png");
|
||||
@apply bottom-[1px] z-[3] mx-auto my-0 flex h-[9px] w-full items-center justify-center bg-center bg-no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.unique-sold-out-blocker {
|
||||
width: 364px;
|
||||
height: 30px;
|
||||
background: url("@/assets/images/unique/catalog-info-sold-out.png");
|
||||
|
||||
div {
|
||||
float: right;
|
||||
width: 140px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
margin-top: 5px;
|
||||
margin-right: 17px;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
.unique-compact-plate {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
right: 16px;
|
||||
width: 34px;
|
||||
height: 37px;
|
||||
background: url("@/assets/images/unique/inventory-info-amount-bg.png");
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 9.5px;
|
||||
}
|
||||
}
|
||||
|
||||
.unique-complete-plate {
|
||||
width: 170px;
|
||||
height: 29px;
|
||||
background: url("@/assets/images/unique/catalog-info-amount-bg.png")
|
||||
no-repeat center;
|
||||
z-index: 1;
|
||||
padding-top: 3px;
|
||||
|
||||
.plate-container {
|
||||
margin-left: 45px;
|
||||
width: 100px;
|
||||
font-size: 10px;
|
||||
color: black;
|
||||
|
||||
> :first-child {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.limited-edition-number {
|
||||
display: inline-block;
|
||||
outline: 0;
|
||||
height: 5px;
|
||||
margin-right: 1px;
|
||||
background-image: url("@/assets/images/unique/numbers.png");
|
||||
background-repeat: no-repeat;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
&.n-0 {
|
||||
width: 4px;
|
||||
background-position: -1px 0px;
|
||||
}
|
||||
|
||||
&.n-1 {
|
||||
width: 2px;
|
||||
background-position: -6px 0px;
|
||||
}
|
||||
|
||||
&.n-2 {
|
||||
width: 4px;
|
||||
background-position: -9px 0px;
|
||||
}
|
||||
|
||||
&.n-3 {
|
||||
width: 4px;
|
||||
background-position: -14px 0px;
|
||||
}
|
||||
|
||||
&.n-4 {
|
||||
width: 4px;
|
||||
background-position: -19px 0px;
|
||||
}
|
||||
|
||||
&.n-5 {
|
||||
width: 4px;
|
||||
background-position: -24px 0px;
|
||||
}
|
||||
|
||||
&.n-6 {
|
||||
width: 4px;
|
||||
background-position: -29px 0px;
|
||||
}
|
||||
|
||||
&.n-7 {
|
||||
width: 4px;
|
||||
background-position: -34px 0px;
|
||||
}
|
||||
|
||||
&.n-8 {
|
||||
width: 4px;
|
||||
background-position: -39px 0px;
|
||||
}
|
||||
|
||||
&.n-9 {
|
||||
width: 4px;
|
||||
background-position: -44px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { useVirtualizer } from '@tanstack/react-virtual';
|
||||
import { DetailedHTMLProps, Fragment, HTMLAttributes, ReactElement, forwardRef, useEffect, useRef, useState } from 'react';
|
||||
import { classNames } from './classNames';
|
||||
import { NitroLimitedEditionStyledNumberView } from './limited-edition';
|
||||
import { styleNames } from './styleNames';
|
||||
|
||||
type Props<T> = {
|
||||
@ -143,6 +144,9 @@ const InfiniteGridItem = forwardRef<HTMLDivElement, {
|
||||
'flex flex-col items-center justify-center cursor-pointer overflow-hidden relative bg-center bg-no-repeat w-full rounded-md border-2',
|
||||
(!backgroundImageUrl || !backgroundImageUrl.length) && 'nitro-icon icon-loading',
|
||||
itemActive ? 'border-card-grid-item-active bg-card-grid-item-active' : 'border-card-grid-item-border bg-card-grid-item',
|
||||
(itemUniqueSoldout || (itemUniqueNumber > 0)) && 'unique-item',
|
||||
itemUniqueSoldout && 'sold-out',
|
||||
itemUnseen && ' bg-green-500 bg-opacity-40',
|
||||
className
|
||||
) }
|
||||
style={ styleNames(
|
||||
@ -152,6 +156,19 @@ const InfiniteGridItem = forwardRef<HTMLDivElement, {
|
||||
style
|
||||
) }
|
||||
{ ...rest }>
|
||||
{ (itemCount > itemCountMinimum) &&
|
||||
<div className="absolute align-middle rounded bg-red-700 bg-opacity-80 text-white border-black border top-[2px] right-[2px] text-[9.5px] p-[2px] z-[1] leading-[8px]">{ itemCount }</div> }
|
||||
{ (itemUniqueNumber > 0) &&
|
||||
<>
|
||||
<div
|
||||
className="size-full unique-bg-override"
|
||||
style={ {
|
||||
backgroundImage: `url(${ backgroundImageUrl })`
|
||||
} } />
|
||||
<div className="absolute bottom-0 unique-item-counter">
|
||||
<NitroLimitedEditionStyledNumberView value={ itemUniqueNumber } />
|
||||
</div>
|
||||
</> }
|
||||
{ children }
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -13,7 +13,7 @@ const NitroCardRoot = forwardRef<HTMLDivElement, PropsWithChildren<{
|
||||
<div
|
||||
ref={ ref }
|
||||
className={ classNames(
|
||||
'flex flex-col rounded-md shadow border border-card-border overflow-hidden min-w-full min-h-full max-w-full max-h-full',
|
||||
'flex flex-col rounded-md shadow border-2 border-card-border overflow-hidden min-w-full min-h-full max-w-full max-h-full',
|
||||
className
|
||||
) }
|
||||
{ ...rest } />
|
||||
|
||||
@ -2,4 +2,5 @@ export * from './InfiniteGrid';
|
||||
export * from './NitroCard';
|
||||
export * from './NitroItemCountBadge';
|
||||
export * from './classNames';
|
||||
export * from './limited-edition';
|
||||
export * from './styleNames';
|
||||
|
||||
@ -0,0 +1,18 @@
|
||||
import { FC } from 'react';
|
||||
|
||||
export const NitroLimitedEditionStyledNumberView: FC<{
|
||||
value: number;
|
||||
}> = props =>
|
||||
{
|
||||
const { value = 0 } = props;
|
||||
|
||||
return (
|
||||
<>
|
||||
{ value.toString().split('').map((number, index) =>
|
||||
<i
|
||||
key={ index }
|
||||
className={ 'limited-edition-number n-' + number } />
|
||||
) }
|
||||
</>
|
||||
);
|
||||
}
|
||||
1
src/layout/limited-edition/index.ts
Normal file
1
src/layout/limited-edition/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from './NitroLimitedEditionStyledNumberView';
|
||||
Loading…
Reference in New Issue
Block a user