SDS Projects component

Demo - at the bottom of the page.

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

`
projectName="Socialite AI"
navigation={navigation}
customRouteHandler={router.push}
userSession={userSession}
onSignIn={signIn}
onSignOut={signOut}
hideSettingsButton={false}
hideYourProfileButton={false}
hideUserMenu={false}>
{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)

$3

##### 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

`
colors: {
background: 'bg-black'
}
}} />
`

$3

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';`