binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-2273] Chore: page alignments (#5505)

Browse source 
* chore: headers + common containers

* fix: filters code splitting

* fix: home header

* fix: header changes

* chore: page alignments fixed

* fix: uncommented filters

* fix: used enums

* fix: cards + filters

* fix: enum changes

* fix: reverted package changes

* fix: reverted package changes

* fix: Card + tags seperated + naming fixed

* fix: card + tags seperated + naming fixed

* fix: mobile headers fixed partially

* fix: build errors + minor css

* fix: checkbox spacing

* fix: review changes

* fix: lint errors

* fix: minor review changes
This commit is contained in:
Akshita Goyal 2024-09-05 12:16:24 +05:30 • committed by GitHub
parent c78b2344b8
commit 87dbb9b888
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
181 changed files with 1323 additions and 1122 deletions
Download patch file Download diff file Expand all files Collapse all files

41
packages/ui/src/card/card.tsx Normal file
View file

@ -0,0 +1,41 @@
import * as React from "react";
import { cn } from "../../helpers";
import {
ECardDirection,
ECardSpacing,
ECardVariant,
getCardStyle,
TCardDirection,
TCardSpacing,
TCardVariant,
} from "./helper";
export interface CardProps {
variant?: TCardVariant;
spacing?: TCardSpacing;
direction?: TCardDirection;
className?: string;
children: React.ReactNode;
}
const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
const {
variant = ECardVariant.WITH_SHADOW,
direction = ECardDirection.COLUMN,
className = "",
spacing = ECardSpacing.LG,
children,
...rest
} = props;
const style = getCardStyle(variant, spacing, direction);
return (
<div ref={ref} className={cn(style, className)} {...rest}>
{children}
</div>
);
});
Card.displayName = "plane-ui-card";
export { Card, ECardVariant, ECardSpacing, ECardDirection };

36
packages/ui/src/card/helper.tsx Normal file
View file

@ -0,0 +1,36 @@
export enum ECardVariant {
WITHOUT_SHADOW = "without-shadow",
WITH_SHADOW = "with-shadow",
}
export enum ECardDirection {
ROW = "row",
COLUMN = "column",
}
export enum ECardSpacing {
SM = "sm",
LG = "lg",
}
export type TCardVariant = ECardVariant.WITHOUT_SHADOW | ECardVariant.WITH_SHADOW;
export type TCardDirection = ECardDirection.ROW | ECardDirection.COLUMN;
export type TCardSpacing = ECardSpacing.SM | ECardSpacing.LG;
export interface ICardProperties {
[key: string]: string;
}
const DEFAULT_STYLE =
"bg-custom-background-100 rounded-lg border-[0.5px] border-custom-border-200 w-full flex flex-col";
export const containerStyle: ICardProperties = {
[ECardVariant.WITHOUT_SHADOW]: "",
[ECardVariant.WITH_SHADOW]: "hover:shadow-custom-shadow-4xl duration-300",
};
export const spacings = {
[ECardSpacing.SM]: "p-4",
[ECardSpacing.LG]: "p-6",
};
export const directions = {
[ECardDirection.ROW]: "flex-row space-x-3",
[ECardDirection.COLUMN]: "flex-col space-y-3",
};
export const getCardStyle = (variant: TCardVariant, spacing: TCardSpacing, direction: TCardDirection) =>
DEFAULT_STYLE + " " + directions[direction] + " " + containerStyle[variant] + " " + spacings[spacing];

1
packages/ui/src/card/index.ts Normal file
View file

@ -0,0 +1 @@
export * from "./card";