From 75b43a6b3348359fb02b2d117f733cbbd8e9f34a Mon Sep 17 00:00:00 2001 From: Your Name Date: Wed, 10 Dec 2025 23:25:04 -0500 Subject: [PATCH] update frontend --- index.html | 1 + src/components/Filters/FilterButtons.jsx | 30 +++++++++++++++++++ src/styles/filters.css | 37 ++++++++++++++++++++++++ 3 files changed, 68 insertions(+) create mode 100644 src/components/Filters/FilterButtons.jsx create mode 100644 src/styles/filters.css diff --git a/index.html b/index.html index b286088..a2e1a88 100644 --- a/index.html +++ b/index.html @@ -47,6 +47,7 @@ sociowire-frontend +
diff --git a/src/components/Filters/FilterButtons.jsx b/src/components/Filters/FilterButtons.jsx new file mode 100644 index 0000000..e3dc66c --- /dev/null +++ b/src/components/Filters/FilterButtons.jsx @@ -0,0 +1,30 @@ +import React from "react"; +import "./../../styles/filters.css"; + +export default function FilterButtons({ onSelect }) { + return ( +
+ + + + + + + + + +
+ ); +} diff --git a/src/styles/filters.css b/src/styles/filters.css new file mode 100644 index 0000000..9a43e26 --- /dev/null +++ b/src/styles/filters.css @@ -0,0 +1,37 @@ +.sw-filter-btn { + width: 72px; + height: 72px; + border-radius: 50%; + background: radial-gradient(circle at 30% 30%, #38bdf8, #1d4ed8, #0b1020); + border: 2px solid rgba(255,255,255,0.25); + box-shadow: 0 4px 12px rgba(0,0,0,0.6); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + color: #fff; + cursor: pointer; + transition: transform .15s, box-shadow .15s; +} + +.sw-filter-btn:hover { + transform: translateY(-3px); + box-shadow: 0 6px 20px rgba(0,0,0,0.75); +} + +.sw-filter-btn i { + font-size: 26px; + margin-bottom: 4px; +} + +.sw-filter-label { + font-size: 0.7rem; + margin-top: 4px; + text-align: center; + color: #dbeafe; +} + +.sw-filter-active { + border-color: #38bdf8; + box-shadow: 0 0 16px #38bdf8; +}