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

<SdsProjects latest={true} />

latest=true will show the latest projects. latest=false will show the top projects.

SdsNavbar

<SdsNavbar
	projectName="Socialite AI"
	navigation={navigation}
	customRouteHandler={router.push}
	userSession={userSession}
	onSignIn={signIn}
	onSignOut={signOut}
	hideSettingsButton={false}
	hideYourProfileButton={false}
  hideUserMenu={false}>
		{children}
</SdsNavbar>

| 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

<SdsNavbar customTheme={{
  colors: {
    background: 'bg-black'
  }
}} />

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