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

Commit806a587

Browse files
added detailed note component
1 parent48e05c3 commit806a587

File tree

6 files changed

+53
-4
lines changed

6 files changed

+53
-4
lines changed

‎src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
UPDATE_NOTE,
1515
}from'./actions';
1616
import{getNotes}from'./services/notes-service';
17+
importDetailedNotefrom'./pages/detailed-note/detailed-note';
1718

1819
functionApp(){
1920
const[theme,setTheme]=useState('light');
@@ -95,6 +96,7 @@ function App() {
9596
onHandleColor="#000"
9697
></Switch>
9798
<Home></Home>
99+
<DetailedNote></DetailedNote>
98100
</ThemeContext.Provider>
99101
</StateContext.Provider>
100102
);

‎src/components/card/card.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
border:1px solid grey;
33
padding:2rem;
44
font-size:1rem;
5-
height:5rem;
65
border-radius:0.5rem;
76
margin-top:1rem;
87
position: relative;

‎src/components/note/note.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ type NoteProps = {
1616
createdAt:Date;
1717
updatedAt:Date;
1818
note:NoteType;
19+
isDetailed?:boolean;
20+
height?:string;
1921
};
2022

2123
functionNote(props:NoteProps){
@@ -31,19 +33,20 @@ function Note(props: NoteProps) {
3133
console.log(awaitdeleteNote(props.id));
3234
dispatch({type:DELETE_NOTE,payload:props.id});
3335
};
34-
36+
37+
constoptionalProps=props.height ?{height:props.height}:{}
3538
return(
3639
<Card
3740
bgColor={
3841
theme==='dark'
3942
?props.priority&&ColorDark[props.priority]
4043
:props.priority&&ColorLight[props.priority]
4144
}
42-
height="3"
4345
padding="1"
46+
{...optionalProps}
4447
>
4548
<>
46-
<divclassName='text'>{props.text}</div>
49+
<divclassName={props.isDetailed?'':'text'}>{props.text}</div>
4750
<divclassName='left-corner date'>{props.updatedAt.toLocaleString()}</div>
4851
<divclassName="right-corner">
4952
<FaEditonClick={()=>editNote(props.note)}></FaEdit>
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.detailed-note{
2+
margin:0;
3+
text-align: center;
4+
padding-top:1rem;
5+
}
6+
7+
.detailed-note.light{
8+
background-color: white;
9+
color: black;
10+
}
11+
12+
.detailed-note.dark{
13+
background-color:#333;
14+
color: white;
15+
}
Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import'./detailed-note.css';
2+
importNotefrom'../../components/note/note';
3+
import{useContext}from'react';
4+
import{ThemeContext}from'../../context/theme/theme';
5+
import{StateContext}from'../../context/state/state';
6+
7+
functionDetailedNote(){
8+
consttheme=useContext(ThemeContext);
9+
const{ state}=useContext(StateContext);
10+
constnote=state.notes[0];
11+
return(
12+
<divclassName={`detailed-note${theme}`}>
13+
<div>
14+
{note&&<Note
15+
key={note.id}
16+
id={note.id}
17+
priority={note.priority}
18+
text={note.text}
19+
createdAt={note.createdAt}
20+
updatedAt={note.updatedAt}
21+
note={note}
22+
isDetailed={true}
23+
></Note>}
24+
</div>
25+
</div>
26+
);
27+
}
28+
29+
exportdefaultDetailedNote;

‎src/pages/home/home.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ function Home() {
2323
createdAt={note.createdAt}
2424
updatedAt={note.updatedAt}
2525
note={note}
26+
height="3"
2627
></Note>
2728
))}
2829
</div>

0 commit comments

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