Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
2
2021-155
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
2021-155
2021-155
Commits
510b5cd7
Commit
510b5cd7
authored
May 27, 2021
by
Kamal Thennakoon
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
add blog card
parent
33705cd0
Changes
1
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
124 additions
and
0 deletions
+124
-0
client/components/portfolio/blog-card/blog-card.js
client/components/portfolio/blog-card/blog-card.js
+124
-0
No files found.
client/components/portfolio/blog-card/blog-card.js
0 → 100644
View file @
510b5cd7
import
React
from
'
react
'
;
import
{
makeStyles
}
from
'
@material-ui/core/styles
'
;
import
clsx
from
'
clsx
'
;
import
Card
from
'
@material-ui/core/Card
'
;
import
CardHeader
from
'
@material-ui/core/CardHeader
'
;
import
CardMedia
from
'
@material-ui/core/CardMedia
'
;
import
CardContent
from
'
@material-ui/core/CardContent
'
;
import
CardActions
from
'
@material-ui/core/CardActions
'
;
import
Collapse
from
'
@material-ui/core/Collapse
'
;
import
Avatar
from
'
@material-ui/core/Avatar
'
;
import
IconButton
from
'
@material-ui/core/IconButton
'
;
import
Typography
from
'
@material-ui/core/Typography
'
;
import
{
red
}
from
'
@material-ui/core/colors
'
;
import
FavoriteIcon
from
'
@material-ui/icons/Favorite
'
;
import
ShareIcon
from
'
@material-ui/icons/Share
'
;
import
ExpandMoreIcon
from
'
@material-ui/icons/ExpandMore
'
;
import
MoreVertIcon
from
'
@material-ui/icons/MoreVert
'
;
const
useStyles
=
makeStyles
((
theme
)
=>
({
root
:
{
maxWidth
:
345
,
},
media
:
{
height
:
0
,
paddingTop
:
'
56.25%
'
,
// 16:9
},
expand
:
{
transform
:
'
rotate(0deg)
'
,
marginLeft
:
'
auto
'
,
transition
:
theme
.
transitions
.
create
(
'
transform
'
,
{
duration
:
theme
.
transitions
.
duration
.
shortest
,
}),
},
expandOpen
:
{
transform
:
'
rotate(180deg)
'
,
},
avatar
:
{
backgroundColor
:
red
[
500
],
},
}));
export
default
function
BlogCard
()
{
const
classes
=
useStyles
();
const
[
expanded
,
setExpanded
]
=
React
.
useState
(
false
);
const
handleExpandClick
=
()
=>
{
setExpanded
(
!
expanded
);
};
return
(
<
Card
className
=
{
classes
.
root
}
>
<
CardHeader
avatar
=
{
<
Avatar
aria
-
label
=
"
recipe
"
className
=
{
classes
.
avatar
}
>
R
<
/Avatar
>
}
action
=
{
<
IconButton
aria
-
label
=
"
settings
"
>
<
MoreVertIcon
/>
<
/IconButton
>
}
title
=
"
Shrimp and Chorizo Paella
"
subheader
=
"
September 14, 2016
"
/>
<
CardMedia
className
=
{
classes
.
media
}
image
=
"
/images/portfolio/javaLogo.png
"
title
=
"
Paella dish
"
/>
<
CardContent
>
<
Typography
variant
=
"
body2
"
color
=
"
textSecondary
"
component
=
"
p
"
>
This
impressive
paella
is
a
perfect
party
dish
and
a
fun
meal
to
cook
together
with
your
guests
.
Add
1
cup
of
frozen
peas
along
with
the
mussels
,
if
you
like
.
<
/Typography
>
<
/CardContent
>
<
CardActions
disableSpacing
>
<
IconButton
aria
-
label
=
"
add to favorites
"
>
<
FavoriteIcon
/>
<
/IconButton
>
<
IconButton
aria
-
label
=
"
share
"
>
<
ShareIcon
/>
<
/IconButton
>
<
IconButton
className
=
{
clsx
(
classes
.
expand
,
{
[
classes
.
expandOpen
]:
expanded
,
})}
onClick
=
{
handleExpandClick
}
aria
-
expanded
=
{
expanded
}
aria
-
label
=
"
show more
"
>
<
ExpandMoreIcon
/>
<
/IconButton
>
<
/CardActions
>
<
Collapse
in
=
{
expanded
}
timeout
=
"
auto
"
unmountOnExit
>
<
CardContent
>
<
Typography
paragraph
>
Method
:
<
/Typography
>
<
Typography
paragraph
>
Heat
1
/
2
cup
of
the
broth
in
a
pot
until
simmering
,
add
saffron
and
set
aside
for
10
minutes
.
<
/Typography
>
<
Typography
paragraph
>
Heat
oil
in
a
(
14
-
to
16
-
inch
)
paella
pan
or
a
large
,
deep
skillet
over
medium
-
high
heat
.
Add
chicken
,
shrimp
and
chorizo
,
and
cook
,
stirring
occasionally
until
lightly
browned
,
6
to
8
minutes
.
Transfer
shrimp
to
a
large
plate
and
set
aside
,
leaving
chicken
and
chorizo
in
the
pan
.
Add
piment
ó
n
,
bay
leaves
,
garlic
,
tomatoes
,
onion
,
salt
and
pepper
,
and
cook
,
stirring
often
until
thickened
and
fragrant
,
about
10
minutes
.
Add
saffron
broth
and
remaining
4
1
/
2
cups
chicken
broth
;
bring
to
a
boil
.
<
/Typography
>
<
Typography
paragraph
>
Add
rice
and
stir
very
gently
to
distribute
.
Top
with
artichokes
and
peppers
,
and
cook
without
stirring
,
until
most
of
the
liquid
is
absorbed
,
15
to
18
minutes
.
Reduce
heat
to
medium
-
low
,
add
reserved
shrimp
and
mussels
,
tucking
them
down
into
the
rice
,
and
cook
again
without
stirring
,
until
mussels
have
opened
and
rice
is
just
tender
,
5
to
7
minutes
more
.
(
Discard
any
mussels
that
don
’
t
open
.)
<
/Typography
>
<
Typography
>
Set
aside
off
of
the
heat
to
let
rest
for
10
minutes
,
and
then
serve
.
<
/Typography
>
<
/CardContent
>
<
/Collapse
>
<
/Card
>
);
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment