canastack-admin
/
sw-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update frontend

This commit is contained in:
Your Name 2025-12-10 23:25:04 -05:00
parent 851ee4fe1c
commit 75b43a6b33
3 changed files with 68 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -47,6 +47,7 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>sociowire-frontend</title> <title>sociowire-frontend</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

30
src/components/Filters/FilterButtons.jsx Normal file
View File

@ -0,0 +1,30 @@
import React from "react";
import "./../../styles/filters.css";
export default function FilterButtons({ onSelect }) {
return (
<div style={{ display: "flex", flexDirection: "column", gap: "0.6rem" }}>
<button className="sw-filter-btn" onClick={() => onSelect("news")}>
<i className="fa-solid fa-newspaper"></i>
<div className="sw-filter-label">News</div>
</button>
<button className="sw-filter-btn" onClick={() => onSelect("friends")}>
<i className="fa-solid fa-user-group"></i>
<div className="sw-filter-label">Friends</div>
</button>
<button className="sw-filter-btn" onClick={() => onSelect("events")}>
<i className="fa-solid fa-calendar-days"></i>
<div className="sw-filter-label">Events</div>
</button>
<button className="sw-filter-btn" onClick={() => onSelect("market")}>
<i className="fa-solid fa-chart-line"></i>
<div className="sw-filter-label">Market</div>
</button>
</div>
);
}

37
src/styles/filters.css Normal file
View File

@ -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;
}