# sds-projects
> [Demo - at the bottom of the page](https://www.cheerleaderai.com/about-us).
Latest version **0.2.36** (published 2024-01-10) · 0 weekly downloads
## Install
```sh
npm install sds-projects
pnpm add sds-projects
yarn add sds-projects
bun add sds-projects
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: esm support; no vulnerabilities.
Warnings: low downloads; no types; low quality score; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.2.36 |
| Published | 2024-01-10 |
| First published | 2023-07-05 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 13 |
| Unpacked size | 3.9 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | xolas, jeanmmayer, egonstep, abneraestudio, thiagoscodeler |
## Links
- npm: https://www.npmjs.com/package/sds-projects
- npm.io page: https://npm.io/package/sds-projects
## Dependencies (13)
- [react](https://npm.io/package/react.md) ^18.2.0
- [swiper](https://npm.io/package/swiper.md) ^10.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [@types/npm](https://npm.io/package/@types/npm.md) ^7.19.3
- [classnames](https://npm.io/package/classnames.md) ^2.3.2
- [posthog-js](https://npm.io/package/posthog-js.md) ^1.93.6
- [react-toastify](https://npm.io/package/react-toastify.md) ^9.1.3
- [tailwind-merge](https://npm.io/package/tailwind-merge.md) ^1.14.0
- [@typeform/embed](https://npm.io/package/@typeform/embed.md) ^2.16.0
- [react-web-share](https://npm.io/package/react-web-share.md) ^2.0.2
- [@heroicons/react](https://npm.io/package/@heroicons/react.md) ^2.0.18
- [@headlessui/react](https://npm.io/package/@headlessui/react.md) ^1.7.15
- [react-step-progress-bar](https://npm.io/package/react-step-progress-bar.md) ^1.0.3
## Recent versions
- 0.2.36 (latest) — 2024-01-10
- 0.2.35 — 2024-01-10
- 0.2.34 — 2024-01-09
- 0.2.33 — 2024-01-08
- 0.2.32 — 2024-01-03
- 0.2.31 — 2024-01-02
- 0.2.30 — 2023-12-27
- 0.2.29 — 2023-12-21
- 0.2.28 — 2023-12-08
- 0.2.27 — 2023-12-07
- 0.2.26 — 2023-12-07
- 0.2.25 — 2023-12-07
- 0.2.24 — 2023-12-06
- 0.2.23 — 2023-12-06
- 0.2.22 — 2023-12-06
- … 46 more at https://npm.io/package/sds-projects/versions
## README
# SDS Projects component
[Demo - at the bottom of the page](https://www.cheerleaderai.com/about-us).
## Install
`yarn add sds-projects`
or
`npm install sds-projects`
## Import styles
Add the following to your tailwind.config.js file
```
content: [
...,
"./node_modules/sds-projects/**/*.{js,ts,jsx,tsx,mdx}",
],
```
## Import Components
`import { SdsProjects } from 'sds-projects'`
`import { SdsNavbar } from 'sds-projects'`
## SdsProjects
``
`latest=true` will show the latest projects.
`latest=false` will show the top projects.
## SdsNavbar
```
{children}
```
| Field name | Description |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `projectName` | You pass in your project name to show in the navbar projects dropdown navigation follows the following structure and it's the items shows in the side panel. |
| `customRouteHandler` | Is an optional parameter to override the default navigation, the raw "href", you can pass the NextJS router.push function for example. |
| `userSession` | Is the session from next-auth (get it from useSession() hook). |
| `onSignIn` | Is the handler for when the user clicks the sign in button. |
| `onSignOut` | Is the handler for when the user clicks the sign out button. |
| `hideSettingsButton` | Is optional and tells if the settings button should be hidden or not. |
| `hideYourProfileButton` | Is optional and tells if the profile menu button should be hidden or not. |
| `hideUserMenu` | Is optional and tells if the SignIn button should be hidden or not. |
navigation example:
```
const navigation = [
{
name: "Socialite AI",
page: "/",
icon: BoltIcon,
},
{ name: "Pricing", page: "/pricing", icon: CurrencyDollarIcon },
{
name: "Who made this?",
page: "/who-made-this",
icon: BuildingOfficeIcon,
},
];
```
You should also pass the children property (wrapped within the SdsNavbar component) for the page content (usually the for NextJS or the Router for React)
### Themes allow you to change the colors of various components provided by sds-projects
##### SdsNavbar Default theme
```
export const DefaultTheme = {
darkLogo: false,
colors: {
backdrop: "bg-gray-900/80",
background: "bg-white",
border: "border-gray-200",
text: "text-gray-900",
ring: "ring-white/10",
active: "bg-gray-100",
primaryButton:
"text-black transition-colors hover:bg-[#fa6e62] bg-[#f99556]",
floatButton: "bg-[#fa6e62] hover:bg-[#f99556]",
profileIcon: "bg-white",
hover: "hover:bg-gray-100",
itemNotAvailable: "bg-gray-100",
dropdown: "bg-white text-gray-900 ring-gray-300 hover:bg-gray-50",
dropdownItem: "bg-white divide-gray-100 ring-black",
},
containers: {
mobileHeader: "",
mobileSidebar: "",
desktopHeader: "",
desktopSidebar: "",
children: ""
},
};
```
##### WhoMadeThis Default theme
```
export const WhoMadeThisTheme = {
darkLogo: false,
colors: {
text: "text-[#333333]",
firstUniqueText: "text-[#FF5656]",
secondUniqueText:
"bg-clip-text bg-gradient-to-r from-[#FF9652] via-[#FF51A5] to-[#AB3FF8]",
primaryButton:
"bg-gradient-to-r from-[#A3DBFF] to-[#98E6C2] text-[#333333]",
},
};
```
##### Pricing Default theme
```
export const PricingTheme = {
darkLogo: false,
colors: {
text: "text-[#333333]",
primaryButton:
"bg-rose-600 text-white hover:bg-rose-500 focus-visible:outline-rose-600",
secondaryButton:
"text-rose-600 ring-1 ring-inset ring-rose-200 hover:ring-rose-300 focus-visible:outline-rose-600",
primaryCard: "bg-white ring-1 ring-gray-200",
secondaryCard: "bg-white ring-1 ring-gray-200",
icon: "text-rose-600",
badge: "bg-rose-600/10 text-rose-600",
},
};
```
#### Basic usage
Use the following to change the colors of the SdsNavbar
```
```
### Import Who-Made-This and Pricing Pages Components (optional)
For the popup and styles to work you need to add the following to your \_app.js|(root)layout.tsx file
`import '@typeform/embed/build/css/popup.css';`
---
_Source: https://npm.io/package/sds-projects · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._