sds-projects

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