2 files changed, 104 insertions, 0 deletions
diff --git a/public/projects/react-small-apps/apps/notebook/src/components/commons/Button/Button.css b/public/projects/react-small-apps/apps/notebook/src/components/commons/Button/Button.css
new file mode 100644
index 0000000..16268d3
--- /dev/null
+++ b/public/projects/react-small-apps/apps/notebook/src/components/commons/Button/Button.css
@@ -0,0 +1,78 @@
+.btn {
+  cursor: pointer;
+}
+
+.btn--delete {
+  background: hsl(0, 44%, 44%);
+  border: none;
+  border-radius: 50%;
+  box-shadow: 0 0 0 2px hsl(0, 44%, 29%), 1px 2px 1px 2px hsl(0, 44%, 29%);
+  width: 2.4rem;
+  height: 2.4rem;
+  padding: 0.5rem;
+  transition: transform 0.3s ease-in-out 0s;
+}
+
+.btn--delete:hover,
+.btn--delete:focus {
+  background: hsl(0, 44%, 50%);
+  transform: scale(1.1);
+}
+
+.btn--delete:active {
+  background: hsl(0, 44%, 40%);
+  transform: scale(1);
+}
+
+.btn .icon {
+  height: 100%;
+  width: 100%;
+}
+
+.btn--delete #trash-lid-handle {
+  stroke: #fff;
+  stroke-width: 4;
+}
+
+.btn--delete #trash-container,
+.btn--delete #trash-lid {
+  fill: hsl(0, 44%, 49%);
+  stroke: #fff;
+  stroke-width: 5;
+}
+
+.btn--delete #trash-stroke1,
+.btn--delete #trash-stroke2,
+.btn--delete #trash-stroke3 {
+  fill: #fff;
+  stroke: #fff;
+  stroke-width: 1;
+}
+
+.btn--restore {
+  background: hsl(212, 44%, 44%);
+  border: none;
+  border-radius: 50%;
+  box-shadow: 0 0 0 2px hsl(212, 44%, 29%), 1px 2px 1px 2px hsl(212, 44%, 29%);
+  width: 2.4rem;
+  height: 2.4rem;
+  padding: 0.5rem;
+  transition: transform 0.3s ease-in-out 0s;
+}
+
+.btn--restore:hover {
+  background: hsl(212, 44%, 50%);
+  transform: scale(1.1);
+}
+
+.btn--restore:active {
+  background: hsl(212, 44%, 40%);
+  transform: scale(1);
+}
+
+.btn--restore #restore-circle,
+.btn--restore #restore-arrow,
+.btn--restore #restore-first-clock-hand,
+.btn--restore #restore-second-clock-hand {
+  fill: #fff;
+}
diff --git a/public/projects/react-small-apps/apps/notebook/src/components/commons/Button/Button.js b/public/projects/react-small-apps/apps/notebook/src/components/commons/Button/Button.js
new file mode 100644
index 0000000..4580815
--- /dev/null
+++ b/public/projects/react-small-apps/apps/notebook/src/components/commons/Button/Button.js
@@ -0,0 +1,26 @@
+import "./Button.css";
+
+function Button({
+  children,
+  onClickHandler,
+  onBlurHandler,
+  modifier,
+  additionalClassnames,
+}) {
+  let classNames = modifier ? `btn btn--${modifier}` : "btn";
+  classNames = additionalClassnames
+    ? `${classNames} ${additionalClassnames}`
+    : classNames;
+
+  return (
+    <button
+      className={classNames}
+      onClick={onClickHandler}
+      onBlur={onBlurHandler}
+    >
+      {children}
+    </button>
+  );
+}
+
+export default Button;