Skip to content

Commit

Permalink
💄Contact
Browse files Browse the repository at this point in the history
  • Loading branch information
@noeypatt
noeypatt committed Apr 1, 2020
1 parent a3e31bf commit a07f2e6
Show file tree
Hide file tree
Showing 3 changed files with 76 additions and 4 deletions.
56 changes: 54 additions & 2 deletions pages/index/Contact.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const Contact = () => {
const [header, setHeader] = useState("การติดต่อหน่วยงาน")
const [subHead, setSubHead] = useState("อำเภอกะทู้ จังหวัดภูเก็ต")

const [data, setData] = useState([
const [department, setDepartment] = useState([
{
img: "/static/imgContact1.png",
name: "สำนักงานเทศบาลเมืองกะทู้",
Expand All @@ -39,6 +39,24 @@ const Contact = () => {
},
])

const [help, setHelp] = useState([
{
img: "/static/imgContact4.png",
name: "โรงพยาบาลส่งเสริมสุขภาพตำบล ตำบลกะทู้",
detail: "59/3 ม.4 ต.กะทู้ อ.กะทู้ จ.ภูเก็ต โทร.076-321548",
tel: "076321548",
map: "https://www.google.com/maps/place/%E0%B9%82%E0%B8%A3%E0%B8%87%E0%B8%9E%E0%B8%A2%E0%B8%B2%E0%B8%9A%E0%B8%B2%E0%B8%A5%E0%B8%AA%E0%B9%88%E0%B8%87%E0%B9%80%E0%B8%AA%E0%B8%A3%E0%B8%B4%E0%B8%A1%E0%B8%AA%E0%B8%B8%E0%B8%82%E0%B8%A0%E0%B8%B2%E0%B8%9E%E0%B8%95%E0%B8%B3%E0%B8%9A%E0%B8%A5%E0%B8%95%E0%B8%B3%E0%B8%9A%E0%B8%A5%E0%B8%95%E0%B8%B3%E0%B8%9A%E0%B8%A5%E0%B8%81%E0%B8%B0%E0%B8%97%E0%B8%B9%E0%B9%89/@7.916979,98.3415863,17z/data=!3m1!4b1!4m5!3m4!1s0x30503057af5e0b47:0xb21089b5f78f4817!8m2!3d7.916979!4d98.343775"
},
{
img: "",
name: "ศูนย์ดูแลผู้สูงอายุภูเก็ต",
detail: "",
tel: "",
map: ""
},

])

const [status, setStatus] = useState(false)

const [home, setHome] = useState(
Expand Down Expand Up @@ -112,7 +130,7 @@ const Contact = () => {
<div className="detail-content">
<div className="data-detail-content">
{
data.map((item, index) => (
department.map((item, index) => (
<Card
style={{ width: 300, marginTop: 15 }}
actions={[
Expand All @@ -127,7 +145,41 @@ const Contact = () => {
<EnvironmentFilled />
</a>
</Tooltip>,
<Tooltip placement="bottom" title="คัดลอกเบอร์โทร">
<CopyToClipboard text={item.tel} >
<CopyFilled key="Copy" onClick={success} />
</CopyToClipboard>
</Tooltip>,

]}
>
<Skeleton loading={loading} avatar active >
<Meta
avatar={
<Avatar src={item.img} />
}
title={item.name}
subTitle={item.detail}
description={item.detail}
/>
</Skeleton>
</Card>
))
}
</div>

<div className="data-detail-content">
{
help.map((item, index) => (
<Card
style={{ width: 400, marginTop: 15 }}
actions={[

<Tooltip placement="bottom" title="แผนที่">
<a href={item.map} target="_blank">
<EnvironmentFilled />
</a>
</Tooltip>,
<Tooltip placement="bottom" title="คัดลอกเบอร์โทร">
<CopyToClipboard text={item.tel} >
<CopyFilled key="Copy" onClick={success} />
Expand Down
Binary file added static/imgContact4.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 22 additions & 2 deletions styles/index/contact.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
$primary-color: #39b54a !important;

.warp-contact-page {
.page-content {
padding-top: 3rem;
Expand Down Expand Up @@ -25,10 +27,11 @@
display: flex;
flex-direction: column;
margin: 2rem 3rem;

.data-detail-content {
display: flex;
justify-content: space-evenly;
margin-bottom: 2rem;

@media (max-width: 575.98px) {
margin-top: 1rem;
Expand Down Expand Up @@ -78,7 +81,24 @@
.ant-card-actions > li:not(:last-child) {
border-right: none;
}
.ant-skeleton-content .ant-skeleton-paragraph > li + li{
.ant-skeleton-content .ant-skeleton-paragraph > li + li {
margin-top: 0;
}

// .ant-card-actions > li > span a:not(.ant-btn):hover,
// .ant-card-actions > li > span > .anticon:hover {
// color: $primary-color;
// }

// .ant-card {
// border-radius: 1rem;
// }

// .ant-card-bordered {
// border-color: $primary-color;
// }
// .ant-card-actions {
// border-top: 1px solid $primary-color;
// border-radius: 0 0 1rem 1rem;
// }
}

1 comment on commit a07f2e6

@vercel
Copy link

@vercel vercel bot commented on a07f2e6 Apr 1, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to following URLs:

Please sign in to comment.