parent
b814d25939
commit
937a511e19
10 changed files with 203 additions and 2 deletions
@ -0,0 +1,35 @@ |
||||
import "./index.scss"; |
||||
|
||||
const TimeLineItem = ({ data }) => ( |
||||
<div |
||||
className="timeline-item flex flex-row mt-5 w-1/2 justify-end" |
||||
style={{ paddingLeft: "30px" }} |
||||
> |
||||
<div |
||||
className="timeline-item-content relative bg-white rounded shadow-md flex flex-col items-end border border-[#D6D6D6] " |
||||
style={{ maxWidth: "70%", width: "400px" }} |
||||
> |
||||
<div className="flex flex-row-reverse gap-x-2 p-3"> |
||||
<time className="text-xs text-[#0A7C9F]">{data.date}</time> |
||||
<span className="text-xs text-[#0A7C9F]"> - </span> |
||||
<time className="text-xs text-[#0A7C9F]">{data.time}</time>{" "} |
||||
</div> |
||||
{/* <div className="flex flex-row-reverse items-center justify-between w-full"> |
||||
<div className="bg-[#D4E6FF] w-10 h-10 rounded-full"> |
||||
<div className="bg-[#D4E6FF99] w-10 h-10 rounded-full"></div> |
||||
</div> |
||||
</div> */} |
||||
<div className="bg-[#F3F3F3] w-full px-4 py-2 flex flex-row items-center"> |
||||
<p className="text-right text-sm font-bold text-[#00253A]"> |
||||
{data.text} |
||||
</p> |
||||
</div> |
||||
<p className="text-xs text-justify px-4 text-[#00253A99] text-light leading-6"> |
||||
{data.content} |
||||
</p> |
||||
<span className="circle"></span> |
||||
</div> |
||||
</div> |
||||
); |
||||
|
||||
export default TimeLineItem; |
||||
@ -0,0 +1,15 @@ |
||||
import React from "react"; |
||||
|
||||
import timeLineData from "./data.js"; |
||||
import TimeLineItem from "./TimeLineItem.js"; |
||||
|
||||
const TimeLine = () => |
||||
timeLineData.length > 0 && ( |
||||
<div className="timeline-container flex flex-col relative bg-white"> |
||||
{timeLineData.slice(0, 3).map((data, idx) => ( |
||||
<TimeLineItem data={data} key={idx} /> |
||||
))} |
||||
</div> |
||||
); |
||||
|
||||
export default TimeLine; |
||||
|
After Width: | Height: | Size: 742 B |
@ -0,0 +1,21 @@ |
||||
import React from "react"; |
||||
import SearchBox from "../SearchBox"; |
||||
import TitleSubtitle from "../TitleSubtitle"; |
||||
|
||||
import Timeline from "./Timeline.js"; |
||||
|
||||
import search from "./gray-search-icon.svg"; |
||||
|
||||
const TimeLine = ({ data }) => { |
||||
return ( |
||||
<div className="px-10 py-4 mx-auto "> |
||||
<div className="flex flex-row items-center justify-between"> |
||||
<TitleSubtitle /> |
||||
<SearchBox inputWidth={"100%"} searchIcon={search} borderClr="#ddd" /> |
||||
</div> |
||||
<Timeline /> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default TimeLine; |
||||
@ -0,0 +1,84 @@ |
||||
#root { |
||||
width: 100%; |
||||
} |
||||
|
||||
.timeline-container::after { |
||||
background-color: #06bace; |
||||
content: ""; |
||||
position: absolute; |
||||
right: calc(50% - 2px); |
||||
width: 4px; |
||||
height: 100%; |
||||
} |
||||
|
||||
.timeline-item:nth-child(odd) { |
||||
align-self: flex-end; |
||||
justify-content: flex-start; |
||||
padding-right: 30px; |
||||
padding-left: 0px; |
||||
} |
||||
|
||||
.timeline-item-content::after { |
||||
content: ""; |
||||
background-color: #fff; |
||||
box-shadow: -1px 1px 1px rgba(0, 0, 0.2); |
||||
width: 15px; |
||||
height: 15px; |
||||
position: absolute; |
||||
transform: rotate(45deg); |
||||
left: -7.5px; |
||||
top: calc(50% - 7.5px); |
||||
} |
||||
|
||||
.timeline-item:nth-child(odd) .timeline-item-content { |
||||
align-items: flex-start; |
||||
text-align: left; |
||||
} |
||||
|
||||
.timeline-item:nth-child(odd) .timeline-item-content::after { |
||||
box-shadow: 1px -1px 1px rgba(0, 0, 0.2); |
||||
left: auto; |
||||
right: -7.5px; |
||||
} |
||||
|
||||
.timeline-item-content .circle { |
||||
background-color: #06bace; |
||||
border: solid 4px #fff; |
||||
border-radius: 50%; |
||||
width: 20px; |
||||
height: 20px; |
||||
position: absolute; |
||||
top: calc(50% - 10px); |
||||
left: -40px; |
||||
z-index: 100; |
||||
} |
||||
|
||||
.timeline-item:nth-child(odd) .timeline-item-content .circle { |
||||
left: auto; |
||||
right: -40px; |
||||
} |
||||
|
||||
@media only screen and (max-width: 767px) { |
||||
.timeline-item-content, |
||||
.timeline-item:nth-child(odd) .timeline-item-content { |
||||
padding: 15px 10px; |
||||
text-align: center !important; |
||||
align-items: center !important; |
||||
} |
||||
|
||||
.timeline-item-content .tag { |
||||
width: calc(100% - 10px); |
||||
} |
||||
|
||||
.timeline-item-content time { |
||||
margin-top: 20px; |
||||
} |
||||
|
||||
.timeline-item-content a { |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
.timeline-item-content a::after { |
||||
display: none; |
||||
} |
||||
} |
||||
Loading…
Reference in new issue