@@ -6,17 +6,52 @@ import { patterns } from '../static/patterns';
66const StyledPatterns = styled . div `` ;
77
88const PatternsList = ( ) => {
9+ const lister = patternType => (
10+ < ul >
11+ { patterns . map ( ( { id, name, type } ) => {
12+ if ( type === patternType ) {
13+ return (
14+ < li key = { id } >
15+ < Link to = { `/patterns/${ id } } > { name } </ Link >
16+ </ li >
17+ ) ;
18+ }
19+ } ) }
20+ </ ul >
21+ ) ;
22+ 923 return (
1024 < StyledPatterns >
11- < h1 > LIST OF PATTERNS</ h1 >
12- 13- < ul >
14- { patterns . map ( pattern => (
15- < li key = { pattern . id } >
16- < Link to = { `/patterns/${ pattern . id } } > { pattern . name } </ Link >
17- </ li >
18- ) ) }
19- </ ul >
25+ < h1 > DESIGN PATTERNS</ h1 >
26+ 27+ < p >
28+ In software engineering, a design pattern is a general repeatable solution to a commonly
29+ occurring problem in software design.
30+ </ p >
31+ 32+ < h2 > Creational Design Patterns</ h2 >
33+ < p >
34+ These design patterns are all about class instantiation. This pattern can be further divided
35+ into class-creation patterns and object-creational patterns. While class-creation patterns
36+ use inheritance effectively in the instantiation process, object-creation patterns use
37+ delegation effectively to get the job done.
38+ </ p >
39+ { lister ( 'creational' ) }
40+ 41+ < h2 > Structural Design Patterns</ h2 >
42+ < p >
43+ These design patterns are all about Class and Object composition. Structural class-creation
44+ patterns use inheritance to compose interfaces. Structural object-patterns define ways to
45+ compose objects to obtain new functionality.
46+ </ p >
47+ { lister ( 'structural' ) }
48+ 49+ < h2 > Behavioral Design Patterns</ h2 >
50+ < p >
51+ These design patterns are all about Class's objects communication. Behavioral patterns are
52+ those patterns that are most specifically concerned with communication between objects.
53+ </ p >
54+ { lister ( 'behavioral' ) }
2055 </ StyledPatterns >
2156 ) ;
2257} ;
0 commit comments