139 lines
2.2 KiB
TypeScript
139 lines
2.2 KiB
TypeScript
import { cva } from "class-variance-authority"
|
|
|
|
import styles from "./item.module.css"
|
|
|
|
export const itemVariants = cva(styles.item, {
|
|
variants: {
|
|
order: {
|
|
1: styles.order1,
|
|
2: styles.order2,
|
|
3: styles.order3,
|
|
4: styles.order4,
|
|
5: styles.order5,
|
|
6: styles.order6,
|
|
7: styles.order7,
|
|
8: styles.order8,
|
|
9: styles.order9,
|
|
},
|
|
// These are only placeholder classes
|
|
// so that we can use compoundVariants
|
|
columns: {
|
|
2: styles.colTwo,
|
|
3: styles.colThree,
|
|
4: styles.colFour,
|
|
6: styles.colSix,
|
|
8: styles.colEight,
|
|
},
|
|
// These are only placeholder classes
|
|
// so that we can use compoundVariants
|
|
rows: {
|
|
1: styles.rowOne,
|
|
2: styles.rowTwo,
|
|
3: styles.rowThree,
|
|
6: styles.rowSix,
|
|
},
|
|
},
|
|
compoundVariants: [
|
|
{
|
|
class: styles.c2r1,
|
|
columns: 2,
|
|
rows: 1,
|
|
},
|
|
{
|
|
class: styles.c2r2,
|
|
columns: 2,
|
|
rows: 2,
|
|
},
|
|
{
|
|
class: styles.c2r3,
|
|
columns: 2,
|
|
rows: 3,
|
|
},
|
|
{
|
|
class: styles.c2r6,
|
|
columns: 2,
|
|
rows: 6,
|
|
},
|
|
{
|
|
class: styles.c3r1,
|
|
columns: 3,
|
|
rows: 1,
|
|
},
|
|
{
|
|
class: styles.c3r2,
|
|
columns: 3,
|
|
rows: 2,
|
|
},
|
|
{
|
|
class: styles.c3r3,
|
|
columns: 3,
|
|
rows: 3,
|
|
},
|
|
{
|
|
class: styles.c3r6,
|
|
columns: 3,
|
|
rows: 6,
|
|
},
|
|
{
|
|
class: styles.c4r1,
|
|
columns: 4,
|
|
rows: 1,
|
|
},
|
|
{
|
|
class: styles.c4r2,
|
|
columns: 4,
|
|
rows: 2,
|
|
},
|
|
{
|
|
class: styles.c4r3,
|
|
columns: 4,
|
|
rows: 3,
|
|
},
|
|
{
|
|
class: styles.c4r6,
|
|
columns: 4,
|
|
rows: 6,
|
|
},
|
|
{
|
|
class: styles.c6r1,
|
|
columns: 6,
|
|
rows: 1,
|
|
},
|
|
{
|
|
class: styles.c6r2,
|
|
columns: 6,
|
|
rows: 2,
|
|
},
|
|
{
|
|
class: styles.c6r3,
|
|
columns: 6,
|
|
rows: 3,
|
|
},
|
|
{
|
|
class: styles.c6r6,
|
|
columns: 6,
|
|
rows: 6,
|
|
},
|
|
{
|
|
class: styles.c8r1,
|
|
columns: 8,
|
|
rows: 1,
|
|
},
|
|
{
|
|
class: styles.c8r2,
|
|
columns: 8,
|
|
rows: 2,
|
|
},
|
|
{
|
|
class: styles.c8r3,
|
|
columns: 8,
|
|
rows: 3,
|
|
},
|
|
{
|
|
class: styles.c8r6,
|
|
columns: 8,
|
|
rows: 6,
|
|
},
|
|
],
|
|
})
|