Skip to content

Commit 6f042dc

Browse files
adithejadithej
committed
Card-component
1 parent b7d89cf commit 6f042dc

File tree

15 files changed

+533
-44
lines changed

15 files changed

+533
-44
lines changed

‎component/Button/Button.module.scss

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,36 +6,36 @@
66

77
Button.button {
88
border: none;
9-
padding: $p-10 $p-20;
9+
padding: $p-10 $p-20; // $p-10 $p-20
1010
border-radius: $p-5;
11-
font-size: $p-15;
11+
font-size: $p-15; //$p-15
1212
cursor: pointer;
1313
display: flex;
1414
align-items: center;
15-
15+
justify-content: center;
1616
&.primary {
1717
background-color: $button-background-primary; // $button-background-primary
18-
color: #f1fcfd; // $button-color
19-
border-style: solid;
18+
color: $button-color-primary; // $button-color #f1fcfd
19+
// border-style: solid;
2020
}
2121

2222
&.secondary {
23-
border-color: #b9c9d1;
23+
border-color: $button-border-secondary;
2424
background-color: $button-background-secondary; //
25-
color: $button-color;
25+
color: $button-color-secondary;
2626
border-style: solid;
2727
&:hover {
28-
background-color: #e2e8f0; // 226, 232, 240
28+
background-color: $button-background-hover; // 226, 232, 240 //$button-background-hover
2929
}
3030
}
3131

3232
&.danger {
3333
background-color: $button-background-danger;
34-
color: $button-color;
34+
color: $button-color-secondary;
3535
}
3636

3737
span.icon {
38-
margin-right: $p-10;
38+
justify-items: center;
3939
}
4040

4141
span.label {

‎component/CardForm/CardForm.module.scss

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
.card-primitive {
2+
border-style: solid;
3+
border-radius: 0.5rem;
4+
border-width: 1px;
5+
border-color: $card-border-primary; //rgb(29, 40, 58) w: hsl(214.3 31.8% 91.4%)
6+
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); // box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
7+
color: hsl(222.2 47.4% 11.2%);
8+
background-color: $card-background-primary; //hsl(0 0% 100%) dark : dark
9+
width: 350px;
10+
}
11+
.card-header {
12+
display: flex;
13+
padding: 1.5rem;
14+
margin-top: 0.375rem;
15+
flex-direction: column;
16+
padding-bottom: 0;
17+
}
18+
19+
.card-title {
20+
font-size: 1.125rem;
21+
line-height: 1.75rem;
22+
font-weight: 600;
23+
letter-spacing: -0.025em;
24+
line-height: 1;
25+
margin: 0;
26+
color: $card-text-primary;
27+
}
28+
29+
.card-description {
30+
font-size: 0.875rem;
31+
line-height: 1.25rem;
32+
color: hsl(215.4 16.3% 46.9%); // hsl(215.4 16.3% 46.9%)
33+
}
34+
35+
.card-content {
36+
padding: 1.5rem;
37+
padding-top: 0;
38+
}
39+
40+
.card-footer {
41+
display: flex;
42+
padding: 1.2rem;
43+
padding-top: 0;
44+
align-items: center;
45+
}
46+
47+
.demo-card {
48+
width: 350px;
49+
}
50+
51+
.demo-card-titles {
52+
display: grid;
53+
align-items: center;
54+
width: 100%;
55+
gap: 1rem;
56+
width: 280px;
57+
}
58+
59+
.demo-card-title {
60+
display: flex;
61+
margin-top: 0.375rem;
62+
flex-direction: column;
63+
color: $card-text-primary;
64+
}
65+
66+
.demo-card-select {
67+
width: 165px;
68+
}
69+
70+
.demo-card-input {
71+
width: 165px;
72+
}
73+
.demo-card-button {
74+
margin-left: 120px;
75+
}
76+
.demo-card-button-secondary {
77+
margin-left: 5px;
78+
}
79+
80+
.demo-card-label {
81+
margin-bottom: 3px;
82+
}
83+
84+
.demo-card-footer {
85+
display: flex;
86+
justify-content: space-between;
87+
}

‎component/CardForm/CardForm.stories.tsx

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import { Meta, StoryObj } from "@storybook/react";
2+
import {
3+
Card,
4+
CardHeader,
5+
CardFooter,
6+
CardTitle,
7+
CardDescription,
8+
CardContent,
9+
} from "./CardForm";
10+
import Button from "../Button";
11+
import Input from "../Input";
12+
import styles from "./CardForm.module.scss";
13+
import {
14+
Select,
15+
SelectValue,
16+
SelectTrigger,
17+
SelectContent,
18+
SelectItem,
19+
} from "../Select";
20+
21+
const meta: Meta<typeof Card> = {
22+
title: "Componenets/Card",
23+
component: Card,
24+
};
25+
26+
export default meta;
27+
28+
export const CardForm = () => (
29+
<>
30+
<Card className={styles["demo-card"]}>
31+
<CardHeader>
32+
<CardTitle>Create project</CardTitle>
33+
<CardDescription>Deploy your new project in one-click.</CardDescription>
34+
</CardHeader>
35+
<CardContent>
36+
<form>
37+
<div className={styles["demo-card-titles"]}>
38+
<div className={styles["demo-card-title"]}>
39+
<label className={styles["demo-card-label"]} htmlFor="name">
40+
Name
41+
</label>
42+
<div className={styles["demo-card-input"]}>
43+
<Input id="name" placeholder="Name of your project" type={""} />
44+
</div>
45+
</div>
46+
<div className={styles["demo-card-title"]}>
47+
<label className={styles["demo-card-label"]} htmlFor="name">
48+
Framework
49+
</label>
50+
<div className={styles["demo-card-select"]}>
51+
<Select>
52+
<SelectTrigger>
53+
<SelectValue placeholder="Select" />
54+
<SelectContent position="popper">
55+
<SelectItem value="next">Next.js</SelectItem>
56+
<SelectItem value="sveltekit">SvelteKit</SelectItem>
57+
<SelectItem value="astro">Astro</SelectItem>
58+
<SelectItem value="nuxt">Nuxt.js</SelectItem>
59+
</SelectContent>
60+
</SelectTrigger>
61+
</Select>
62+
</div>
63+
</div>
64+
</div>
65+
</form>
66+
</CardContent>
67+
<CardFooter className={styles["demo-card-footer"]}>
68+
<div className={styles["demo-card-button-secondary"]}>
69+
<Button variant="secondary" icon={<></>}>
70+
Cancel
71+
</Button>
72+
</div>
73+
<div className={styles["demo-card-button"]}>
74+
<Button variant="primary" icon={<></>}>
75+
Deploy
76+
</Button>
77+
</div>
78+
</CardFooter>
79+
</Card>
80+
</>
81+
);

‎component/CardForm/CardForm.tsx

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import * as React from "react";
2+
import styles from "./CardForm.module.scss";
3+
4+
const Card = React.forwardRef<
5+
HTMLDivElement,
6+
React.HTMLAttributes<HTMLDivElement>
7+
>(({ className, ...props }, ref) => (
8+
<div ref={ref} className={styles["card-primitive"]} {...props} />
9+
));
10+
Card.displayName = "Card";
11+
12+
const CardHeader = React.forwardRef<
13+
HTMLDivElement,
14+
React.HTMLAttributes<HTMLDivElement>
15+
>(({ className, ...props }, ref) => (
16+
<div ref={ref} className={styles["card-header"]} {...props} />
17+
));
18+
CardHeader.displayName = "CardHeader";
19+
20+
const CardTitle = React.forwardRef<
21+
HTMLParagraphElement,
22+
React.HTMLAttributes<HTMLHeadingElement>
23+
>(({ className, ...props }, ref) => (
24+
<h3 ref={ref} className={styles["card-title"]} {...props} />
25+
));
26+
CardTitle.displayName = "CardTitle";
27+
28+
const CardDescription = React.forwardRef<
29+
HTMLParagraphElement,
30+
React.HTMLAttributes<HTMLParagraphElement>
31+
>(({ className, ...props }, ref) => (
32+
<p ref={ref} className={styles["card-description"]} {...props} />
33+
));
34+
CardDescription.displayName = "CardDescription";
35+
36+
const CardContent = React.forwardRef<
37+
HTMLDivElement,
38+
React.HTMLAttributes<HTMLDivElement>
39+
>(({ className, ...props }, ref) => (
40+
<div ref={ref} className={styles["card-content"]} {...props} />
41+
));
42+
CardContent.displayName = "CardContent";
43+
44+
const CardFooter = React.forwardRef<
45+
HTMLDivElement,
46+
React.HTMLAttributes<HTMLDivElement>
47+
>(({ className, ...props }, ref) => (
48+
<div ref={ref} className={styles["card-footer"]} {...props} />
49+
));
50+
CardFooter.displayName = "CardFooter";
51+
52+
export {
53+
Card,
54+
CardHeader,
55+
CardFooter,
56+
CardTitle,
57+
CardDescription,
58+
CardContent,
59+
};

‎component/CardForm/index.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import {
2+
Card,
3+
CardHeader,
4+
CardFooter,
5+
CardTitle,
6+
CardDescription,
7+
CardContent,
8+
} from "./CardForm";
9+
10+
export {
11+
Card,
12+
CardHeader,
13+
CardFooter,
14+
CardTitle,
15+
CardDescription,
16+
CardContent,
17+
};

‎component/ContextMenu/ContextMenu.module.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
color: $contextmenu-text;
5555
box-shadow: 0 4px 6px -1px $contextmenu-shadow-primary,
5656
0 2px 4px -1px $contextmenu-shadow-seconadry;
57-
animation-name: enter;
57+
// animation-name: enter;
5858
animation-duration: 0.15s;
5959
}
6060

0 commit comments

Comments
 (0)