Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitbfd1b77

Browse files
added Card as CSS Component
1 parent738ff6f commitbfd1b77

File tree

7 files changed

+65
-26
lines changed

7 files changed

+65
-26
lines changed
Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,22 @@
11
.add-noteinput{
22
line-height:2rem;
3-
width:60%;
3+
width:60%;
4+
border:0;
5+
padding:0;
46
}
57
.add-notebutton{
68
line-height:2rem;
7-
width:15%;
9+
width:15%;
10+
border:0;
11+
padding:0;
12+
background-color:rgb(17,157,17);
13+
color: white;
814
}
915

1016
.add-noteselect{
1117
line-height:2rem;
1218
width:20%;
1319
height:2rem;
20+
border:0;
21+
padding:0;
1422
}

‎src/components/add-note/add-note.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useState } from 'react';
22
import{NoteType,Priority}from'../note/note-type';
33
import'./add-note.css';
44
import{v4asuuidv4}from'uuid';
5+
importCardfrom'../card/card';
56

67
typeAddNoteProps={
78
addNote :(note:NoteType)=>void
@@ -31,7 +32,9 @@ function AddNote(props: AddNoteProps){
3132
}
3233

3334
return(
34-
<div>
35+
<CardbgColor='#333'
36+
height='2'
37+
padding='1'>
3538
<formclassName="add-note">
3639
<inputtype="text"onChange={handleChange}value={text}/>
3740
<selectonChange={handleSelect}value={priority}>
@@ -41,7 +44,7 @@ function AddNote(props: AddNoteProps){
4144
</select>
4245
<buttononClick={handleClick}>Add</button>
4346
</form>
44-
</div>
47+
</Card>
4548
)
4649
}
4750

‎src/components/card/card.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.card{
2+
border:1px solid grey;
3+
padding:2rem;
4+
font-size:1rem;
5+
color:#333;
6+
height:5rem;
7+
border-radius:0.5rem;
8+
margin-top:1rem;
9+
10+
}

‎src/components/card/card.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import'./card.css'
2+
3+
typeCardProps={
4+
children :JSX.Element,
5+
bgColor? :string,
6+
height? :string,
7+
padding?:string
8+
}
9+
10+
functionCard(props:CardProps){
11+
return(
12+
<divclassName='card'style={
13+
{backgroundColor:props.bgColor,
14+
height:`${props.height}rem`,
15+
padding:`${props.padding}rem`,
16+
}}>
17+
{props.children}
18+
</div>
19+
)
20+
}
21+
22+
exportdefaultCard;

‎src/components/note/note-type.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,10 @@ export type NoteType = {
99
id:string,
1010
text:string,
1111
priority :Priority
12+
}
13+
14+
exportenumColor{
15+
high='rgb(246, 100, 92)',
16+
medium='rgb(244, 158, 127)',
17+
low='rgb(248, 249, 175)'
1218
}

‎src/components/note/note.css‎

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,2 @@
1-
.note{
2-
border:1px solid grey;
3-
padding:2rem;
4-
font-size:1rem;
5-
color:#333;
6-
height:5rem;
7-
border-radius:0.5rem;
8-
background-color: burlywood;
9-
margin-top:1rem;
101

11-
}
12-
.high{
13-
background-color:rgb(246,100,92);
14-
color: white;
15-
}
16-
.medium{
17-
background-color:rgb(244,158,127);
18-
}
19-
.low{
20-
background-color:rgb(248,249,175);
21-
}
2+

‎src/components/note/note.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,21 @@
11
import'./note.css'
22

3-
import{NoteProps}from'./note-type';
3+
import{NoteProps,Color}from'./note-type';
4+
importCardfrom'../card/card';
5+
6+
7+
48

59
functionNote(props:NoteProps){
610
return(
7-
<divclassName={`note${props.priority}`}>
11+
<Card
12+
bgColor={props.priority&&Color[props.priority]}
13+
height='2'
14+
padding='1'>
15+
<div>
816
{props.text}
917
</div>
18+
</Card>
1019
)
1120
}
1221

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp