sds-projects v0.2.36

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>

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