Created
January 28, 2024 04:58
-
-
Save ArfaniAsra/6347422f417c843d8ad412cc927dc98b to your computer and use it in GitHub Desktop.
React UI Component: Contact-Apps
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from "react"; | |
| import ContactList from "./ContactList"; | |
| import { getData } from "../utils/data"; | |
| function ContactApp() { | |
| const contacts = getData(); | |
| return ( | |
| <div className="contact-app"> | |
| <h1>Daftar Kontak</h1> | |
| <ContactList contacts={contacts} /> | |
| </div> | |
| ); | |
| } | |
| export default ContactApp; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from "react"; | |
| import ContactItemImage from "./ContactItemImage"; | |
| import ContactItemBody from "./ContactItemBody"; | |
| const ContactItem = ({ imageUrl, name, tag }) => { | |
| return ( | |
| <div className="contact-name"> | |
| <ContactItemImage imageUrl={imageUrl} /> | |
| <ContactItemBody name={name} tag={tag} /> | |
| </div> | |
| ); | |
| }; | |
| export default ContactItem; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from "react"; | |
| const ContactItemBody = ({ name, tag }) => { | |
| return ( | |
| <div className="contact-item__body"> | |
| <h3 className="contact-item__title">{name}</h3> | |
| <p className="contact-item__username">@{tag}</p> | |
| </div> | |
| ); | |
| }; | |
| export default ContactItemBody; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react' | |
| const ContactItemImage = ({ imageUrl }) => { | |
| return ( | |
| <div className="contact-item__image"> | |
| <img src={imageUrl} alt="contact avatar" /> | |
| </div> | |
| ); | |
| } | |
| export default ContactItemImage |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from "react"; | |
| import ContactItem from "./ContactItem"; | |
| function ContactList({ contacts }) { | |
| return ( | |
| <div className="contact-list"> | |
| {contacts.map((contact) => ( | |
| <ContactItem key={contact.id} {...contact} /> | |
| ))} | |
| </div> | |
| ); | |
| } | |
| export default ContactList; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from "react"; | |
| import { createRoot } from "react-dom/client"; | |
| import ContactApp from "./components/ContactApp"; | |
| // styling | |
| import "./styles/style.css"; | |
| const root = createRoot(document.getElementById("root")); | |
| root.render(<ContactApp />); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| padding: 0; | |
| margin: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: "Inter", sans-serif; | |
| background-color: whitesmoke; | |
| } | |
| img { | |
| width: 100%; | |
| } | |
| .contact-app { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| padding: 16px; | |
| } | |
| .contact-app h1 { | |
| font-weight: normal; | |
| font-size: 48px; | |
| margin-bottom: 32px; | |
| } | |
| .contact-item { | |
| display: flex; | |
| align-items: center; | |
| margin: 24px 0; | |
| border: 1px dashed black; | |
| padding: 16px; | |
| border-radius: 8px; | |
| } | |
| .contact-item__image img { | |
| width: 64px; | |
| border-radius: 50%; | |
| } | |
| .contact-item__body { | |
| margin-left: 8px; | |
| padding-left: 8px; | |
| border-left: 1px solid #aaa; | |
| flex: 1; | |
| } | |
| .contact-item__title { | |
| padding: 4px 0; | |
| } | |
| .contact-item__username { | |
| font-weight: lighter; | |
| } | |
| .contact-item__delete { | |
| padding: 8px; | |
| font-size: 18px; | |
| background-color: orangered; | |
| color: white; | |
| border: 0; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| } | |
| .contact-input { | |
| border: 1px dashed black; | |
| padding: 16px; | |
| margin: 14px 0; | |
| border-radius: 8px; | |
| margin-bottom: 32px; | |
| } | |
| .contact-input input { | |
| display: block; | |
| width: 100%; | |
| padding: 8px; | |
| margin: 8px 0; | |
| font-family: "Inter", sans-serif; | |
| } | |
| .contact-input button { | |
| width: 100%; | |
| padding: 8px; | |
| font-family: "Inter", sans-serif; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const getData = () => { | |
| return [ | |
| { | |
| id: 1, | |
| name: 'Dimas Saputra', | |
| tag: 'dimasmds', | |
| imageUrl: '/images/dimasmds.jpeg', | |
| }, | |
| { | |
| id: 2, | |
| name: 'Arif Faizin', | |
| tag: 'arifaizin', | |
| imageUrl: '/images/arifaizin.jpeg', | |
| }, | |
| { | |
| id: 3, | |
| name: 'Rahmat Fajri', | |
| tag: 'rfajri27', | |
| imageUrl: '/images/rfajri27.jpeg', | |
| }, | |
| ]; | |
| } | |
| export { getData }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment