oddsgate-ds 1.0.198 → 1.0.199

package/dist/cjs/types/components/molecules/CategoriesWrapper/CategoriesWrapper.component.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CategoriesWrapperProps } from './CategoriesWrapper.interface';
+declare const CategoriesWrapper: React.FC<CategoriesWrapperProps>;
+export default CategoriesWrapper;

package/dist/cjs/types/components/molecules/CategoriesWrapper/CategoriesWrapper.interface.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export interface CategoriesWrapperProps {
+    category: string;
+    categoryItems: React.ReactNode[];
+}

package/dist/cjs/types/components/molecules/CategoriesWrapper/CategoriesWrapper.theme.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const StyledCategoryWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledCategorySeparator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledCategorySeparatorLine: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledCategoryContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledCategoryItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/cjs/types/components/molecules/CategoryIndex/CategoryIndex.component.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CategoryIndexProps } from './CategoryIndex.interface';
+declare const CategoryIndex: React.FC<CategoryIndexProps>;
+export default CategoryIndex;

package/dist/cjs/types/components/molecules/CategoryIndex/CategoryIndex.interface.d.ts

@@ -0,0 +1,5 @@
+export interface CategoryIndexProps {
+    categories: string[];
+    onChange: (category: string | null) => void;
+    selectedCategory: string | null;
+}

package/dist/cjs/types/components/molecules/CategoryIndex/CategoryIndex.theme.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+type ItemProps = {
+    isSelected?: boolean;
+};
+export declare const StyledGlossaryCategoryIndex: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledGlossaryCategoryIndexItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ItemProps>> & string;
+export {};

package/dist/cjs/types/components/molecules/SearchBar/SearchBar.component.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SearchBarProps } from './SearchBar.interface';
+declare const SearchBar: React.FC<SearchBarProps>;
+export default SearchBar;

package/dist/cjs/types/components/molecules/SearchBar/SearchBar.interface.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface SearchBarProps {
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    placeholder?: string;
+}

package/dist/cjs/types/components/molecules/SearchBar/SearchBar.theme.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const StyledGlossarySearch: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SearchInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+export declare const SearchButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;

package/dist/cjs/types/components/organisms/Glossary/Glossary.component.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+type GlossaryItem = {
+    title: string;
+    categories: {
+        name: string;
+        items: {
+            slug: string;
+            name: string;
+        }[];
+    }[];
+};
+type GlossaryProps = {
+    title: string;
+    subtitle: string;
+    items: GlossaryItem[];
+    categories: {
+        name: string;
+        items: {
+            slug: string;
+            name: string;
+        }[];
+    }[];
+    placeholder?: string;
+};
+declare const Glossary: React.FC<GlossaryProps>;
+export default Glossary;

package/dist/cjs/types/components/organisms/Glossary/Glossary.themes.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const StyledGlossary: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledGlossaryHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledGlossaryTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+export declare const StyledGlossarySubtitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+export declare const StyledGlossaryIndex: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledGlossaryCategories: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledGlossarySeparator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledGlossaryCategoryItems: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;

package/dist/esm/types/components/molecules/CategoriesWrapper/CategoriesWrapper.component.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CategoriesWrapperProps } from './CategoriesWrapper.interface';
+declare const CategoriesWrapper: React.FC<CategoriesWrapperProps>;
+export default CategoriesWrapper;

package/dist/esm/types/components/molecules/CategoriesWrapper/CategoriesWrapper.interface.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export interface CategoriesWrapperProps {
+    category: string;
+    categoryItems: React.ReactNode[];
+}

package/dist/esm/types/components/molecules/CategoriesWrapper/CategoriesWrapper.theme.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const StyledCategoryWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledCategorySeparator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledCategorySeparatorLine: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledCategoryContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledCategoryItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/esm/types/components/molecules/CategoryIndex/CategoryIndex.component.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CategoryIndexProps } from './CategoryIndex.interface';
+declare const CategoryIndex: React.FC<CategoryIndexProps>;
+export default CategoryIndex;

package/dist/esm/types/components/molecules/CategoryIndex/CategoryIndex.interface.d.ts

@@ -0,0 +1,5 @@
+export interface CategoryIndexProps {
+    categories: string[];
+    onChange: (category: string | null) => void;
+    selectedCategory: string | null;
+}

package/dist/esm/types/components/molecules/CategoryIndex/CategoryIndex.theme.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+type ItemProps = {
+    isSelected?: boolean;
+};
+export declare const StyledGlossaryCategoryIndex: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledGlossaryCategoryIndexItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ItemProps>> & string;
+export {};

package/dist/esm/types/components/molecules/SearchBar/SearchBar.component.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SearchBarProps } from './SearchBar.interface';
+declare const SearchBar: React.FC<SearchBarProps>;
+export default SearchBar;

package/dist/esm/types/components/molecules/SearchBar/SearchBar.interface.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface SearchBarProps {
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    placeholder?: string;
+}

package/dist/esm/types/components/molecules/SearchBar/SearchBar.theme.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const StyledGlossarySearch: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SearchInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+export declare const SearchButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;

package/dist/esm/types/components/organisms/Glossary/Glossary.component.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+type GlossaryItem = {
+    title: string;
+    categories: {
+        name: string;
+        items: {
+            slug: string;
+            name: string;
+        }[];
+    }[];
+};
+type GlossaryProps = {
+    title: string;
+    subtitle: string;
+    items: GlossaryItem[];
+    categories: {
+        name: string;
+        items: {
+            slug: string;
+            name: string;
+        }[];
+    }[];
+    placeholder?: string;
+};
+declare const Glossary: React.FC<GlossaryProps>;
+export default Glossary;

package/dist/esm/types/components/organisms/Glossary/Glossary.themes.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const StyledGlossary: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledGlossaryHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledGlossaryTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+export declare const StyledGlossarySubtitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+export declare const StyledGlossaryIndex: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledGlossaryCategories: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledGlossarySeparator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledGlossaryCategoryItems: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oddsgate-ds",
-  "version": "1.0.198",
+  "version": "1.0.199",
   "description": "Miew theme component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/molecules/CategoriesWrapper/CategoriesWrapper.component.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import {
+  StyledCategoryContent,
+  StyledCategorySeparator,
+  StyledCategoryWrapper,
+  StyledCategoryItem,
+  StyledCategorySeparatorLine
+} from './CategoriesWrapper.theme'
+import { CategoriesWrapperProps } from './CategoriesWrapper.interface'
+import Button from '@/components/atoms/Button'
+
+const CategoriesWrapper: React.FC<CategoriesWrapperProps> = ({
+  category,
+  categoryItems
+}) => {
+  return (
+    <StyledCategoryWrapper>
+      <StyledCategorySeparator>
+        {category}
+        <StyledCategorySeparatorLine />
+      </StyledCategorySeparator>
+      <StyledCategoryContent>
+        {categoryItems.map((item, index) => (
+          <StyledCategoryItem key={index}>
+              <Button variant="text">{item}</Button>
+            </StyledCategoryItem>
+        ))}
+      </StyledCategoryContent>
+    </StyledCategoryWrapper>
+  )
+}
+
+export default CategoriesWrapper;

package/src/components/molecules/CategoriesWrapper/CategoriesWrapper.interface.ts

@@ -0,0 +1,4 @@
+export interface CategoriesWrapperProps {
+  category: string
+  categoryItems: React.ReactNode[]
+}

package/src/components/molecules/CategoriesWrapper/CategoriesWrapper.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import CategoriesWrapper from './CategoriesWrapper.component'
+
+const meta: Meta<typeof CategoriesWrapper> = {
+  title: 'Components/CategoriesWrapper',
+  component: CategoriesWrapper
+}
+export default meta
+
+type Story = StoryObj<typeof CategoriesWrapper>
+
+export const Default: Story = {
+  args: {
+    category: 'A',
+    categoryItems: [
+      'Ace',
+      'Admin',
+      'AFK',
+      'Anti-eco',
+      'Aimbot',
+      'All-in',
+      'Armor',
+      'APM'
+    ]
+  }
+}

package/src/components/molecules/CategoriesWrapper/CategoriesWrapper.theme.ts

@@ -0,0 +1,38 @@
+import { colors } from '@/styles/variables'
+import styled from 'styled-components'
+
+export const StyledCategoryWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`
+
+export const StyledCategorySeparator = styled.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 0.75rem;
+  font-size: 3rem;
+  font-weight: 700;
+`
+export const StyledCategorySeparatorLine = styled.div`
+  flex-grow: 1;
+  height: 50%;
+  border-bottom: 1px solid ${colors.gray20};
+  opacity: 0.5;
+`
+
+export const StyledCategoryContent = styled.div`
+  display: flex;
+  gap: 1.875rem;
+  flex-wrap: wrap;
+`
+export const StyledCategoryItem = styled.div`
+  & > button {
+    height: 2.125rem;
+    padding: 0.625rem 2.5rem;
+    font-size: 1.5rem;
+    font-weight: 700;
+    text-transform: none;
+  }
+`

package/src/components/molecules/CategoryIndex/CategoryIndex.component.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import {
+  StyledGlossaryCategoryIndex,
+  StyledGlossaryCategoryIndexItem
+} from './CategoryIndex.theme'
+import { CategoryIndexProps } from './CategoryIndex.interface'
+
+const CategoryIndex: React.FC<CategoryIndexProps> = ({
+  categories,
+  onChange,
+  selectedCategory
+}) => {
+  const allCategories = ['#', ...categories]
+
+  return (
+    <StyledGlossaryCategoryIndex>
+      {allCategories.map(category => (
+        <StyledGlossaryCategoryIndexItem
+          onClick={() => onChange(category === '#' ? null : category)}
+          isSelected={
+            selectedCategory === category ||
+            (selectedCategory === null && category === '#')
+          }
+          key={`category-${category}`}
+        >
+          {category}
+        </StyledGlossaryCategoryIndexItem>
+      ))}
+    </StyledGlossaryCategoryIndex>
+  )
+}
+
+export default CategoryIndex

package/src/components/molecules/CategoryIndex/CategoryIndex.interface.ts

@@ -0,0 +1,5 @@
+export interface CategoryIndexProps {
+  categories: string[]
+  onChange: (category: string | null) => void
+  selectedCategory: string | null
+}

package/src/components/molecules/CategoryIndex/CategoryIndex.stories.tsx

@@ -0,0 +1,23 @@
+import React, { useState } from 'react'
+import CategoryIndex from './CategoryIndex.component'
+
+const categories = Array.from({ length: 26 }, (_, i) =>
+  String.fromCharCode(65 + i)
+)
+
+export default {
+  title: 'Components/CategoryIndex',
+  component: CategoryIndex
+}
+
+export const Default = () => {
+  const [selected, setSelected] = useState<string | null>(null)
+
+  return (
+    <CategoryIndex
+      categories={[...categories]}
+      selectedCategory={selected}
+      onChange={setSelected}
+    />
+  )
+}

package/src/components/molecules/CategoryIndex/CategoryIndex.theme.ts

@@ -0,0 +1,27 @@
+import { colors } from '@/styles/variables'
+import styled from 'styled-components'
+
+type ItemProps = {
+  isSelected?: boolean
+}
+
+export const StyledGlossaryCategoryIndex = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+`
+
+export const StyledGlossaryCategoryIndexItem = styled.div<ItemProps>`
+  cursor: pointer;
+  border-radius: 100%;
+  background-color: ${({ isSelected }) =>
+    isSelected ? `${colors.primary50}66` : ''};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.125rem;
+  height: 2.125rem;
+  box-sizing: border-box;
+  color: ${colors.gray20};
+  font-weight: 700;
+  font-size: 1.5rem;
+`

package/src/components/molecules/SearchBar/SearchBar.component.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import {
+  SearchButton,
+  SearchInput,
+  StyledGlossarySearch
+} from './SearchBar.theme'
+import Icon from '@/components/atoms/Icon'
+import { SearchBarProps } from './SearchBar.interface'
+
+const SearchBar: React.FC<SearchBarProps> = ({
+  value,
+  onChange,
+  placeholder
+}) => {
+  return (
+    <StyledGlossarySearch>
+      <SearchInput
+        type="text"
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+      />
+      <SearchButton>
+        <Icon icon="icon-search" />
+      </SearchButton>
+    </StyledGlossarySearch>
+  )
+}
+
+export default SearchBar

package/src/components/molecules/SearchBar/SearchBar.interface.ts

@@ -0,0 +1,5 @@
+export interface SearchBarProps {
+  value: string
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+  placeholder?: string
+}

package/src/components/molecules/SearchBar/SearchBar.stories.tsx

@@ -0,0 +1,18 @@
+import React, { useState } from 'react'
+import SearchBar from './SearchBar.component'
+
+export default {
+  title: 'Components/SearchBar',
+  component: SearchBar
+}
+
+export const Default = () => {
+  const [value, setValue] = useState('')
+  return (
+    <SearchBar
+      value={value}
+      onChange={e => setValue(e.target.value)}
+      placeholder="Search..."
+    />
+  )
+}

package/src/components/molecules/SearchBar/SearchBar.theme.ts

@@ -0,0 +1,47 @@
+import styled from 'styled-components'
+import { colors } from '@/styles/variables'
+
+export const StyledGlossarySearch = styled.div`
+  position: relative;
+  width: 100%;
+  max-width: 870px;
+  margin: 2rem auto;
+`
+
+export const SearchInput = styled.input`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 1.5rem 0.75rem; 
+  border-radius: 62.5rem;
+  border: none;
+  background: ${colors.gray20};
+  font-size: 0.9375rem;
+  color: ${colors.hellobar};
+  &::placeholder {
+    color: ${colors.hellobar};
+  }
+`
+
+export const SearchButton = styled.button`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 1.5rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  background: ${colors.hellobar};
+  border: none;
+  cursor: pointer;
+  color: ${colors.gray20};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    width: 1.25rem;
+    height: 1.25rem;
+    display: block;
+  }
+`

package/src/components/organisms/Glossary/Glossary.component.tsx

@@ -0,0 +1,84 @@
+import React, { useState } from 'react'
+import {
+  StyledGlossary,
+  StyledGlossaryCategories,
+  StyledGlossarySubtitle,
+  StyledGlossaryTitle
+} from './Glossary.themes'
+
+import SearchBar from '@/components/molecules/SearchBar/SearchBar.component'
+import GlossaryCategoryIndex from '@/components/molecules/CategoryIndex/CategoryIndex.component'
+import CategoriesWrapper from '@/components/molecules/CategoriesWrapper/CategoriesWrapper.component'
+
+type GlossaryItem = {
+  title: string
+  categories: { name: string, items: { slug: string, name: string }[] }[]
+}
+
+type GlossaryProps = {
+  title: string
+  subtitle: string
+  items: GlossaryItem[]
+  categories: { name: string, items: { slug: string, name: string }[] }[]
+  placeholder?: string
+}
+
+const Glossary: React.FC<GlossaryProps> = ({
+  title,
+  subtitle,
+  items,
+  categories,
+  placeholder
+}) => {
+  const [searchTerm, setSearchTerm] = useState('')
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null)
+
+  const categoryData: Record<string, string[]> = {}
+  categories[0].items.forEach(cat => {
+    categoryData[cat.name] = []
+  })
+  items.forEach(item => {
+    item.categories[0].items.forEach(cat => {
+      if (categoryData[cat.name]) {
+        categoryData[cat.name].push(item.title)
+      }
+    })
+  })
+
+  const categoryNames = Object.keys(categoryData)
+
+  const displayedCategories = selectedCategory
+    ? [selectedCategory]
+    : categoryNames
+
+  return (
+    <StyledGlossary>
+      <StyledGlossaryTitle>{title}</StyledGlossaryTitle>
+      <StyledGlossarySubtitle>{subtitle}</StyledGlossarySubtitle>
+
+      <SearchBar
+        value={searchTerm}
+        onChange={e => setSearchTerm(e.target.value)}
+        placeholder="What are you looking for?"
+      />
+
+      <GlossaryCategoryIndex
+        categories={categoryNames}
+        selectedCategory={selectedCategory}
+        onChange={cat => setSelectedCategory(cat === selectedCategory ? null : cat)}
+      />
+
+      <StyledGlossaryCategories>
+        {displayedCategories.map(category => (
+          <CategoriesWrapper
+            key={category}
+            category={category}
+            categoryItems={categoryData[category]}
+          />
+        ))}
+      </StyledGlossaryCategories>
+    </StyledGlossary>
+  )
+}
+
+export default Glossary

package/src/components/organisms/Glossary/Glossary.stories.tsx

@@ -0,0 +1,278 @@
+import React from 'react'
+import Glossary from './Glossary.component'
+
+export default {
+  title: 'Organisms/Glossary',
+  component: Glossary
+}
+
+export const Basic = () => (
+    <Glossary
+        title="Glossary"
+        subtitle="Explore commonly used terms in the gaming world."
+        categories={[
+            {
+                name: 'glossary-category',
+                items: [
+                    { slug: 'a', name: 'A' },
+                    { slug: 'm', name: 'M' },
+                    { slug: 'b', name: 'B' },
+                    { slug: 'c', name: 'C' },
+                    { slug: 'd', name: 'D' },
+                    { slug: 'e', name: 'E' },
+                    { slug: 'f', name: 'F' },
+                    { slug: 'g', name: 'G' },
+                    { slug: 'h', name: 'H' },
+                    { slug: 'i', name: 'I' },
+                    { slug: 'j', name: 'J' },
+                    { slug: 'k', name: 'K' },
+                    { slug: 'l', name: 'L' },
+                    { slug: 'n', name: 'N' },
+                    { slug: 'o', name: 'O' },
+                    { slug: 'q', name: 'Q' },
+                    { slug: 'r', name: 'R' },
+                    { slug: 't', name: 'T' },
+                    { slug: 'u', name: 'U' },
+                    { slug: 'v', name: 'V' },
+                    { slug: 'w', name: 'W' },
+                    { slug: 'x', name: 'X' },
+                    { slug: 'y', name: 'Y' },
+                    { slug: 'z', name: 'Z' }
+                ]
+            },
+            {
+                name: 'advanced-category',
+                items: [
+                    { slug: 'p', name: 'P' },
+                    { slug: 's', name: 'S' }
+                ]
+            }
+        ]}
+        items={[
+            {
+                title: 'Ace',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'a', name: 'A' }] }]
+            },
+            {
+                title: 'AFK',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'a', name: 'A' }] }]
+            },
+            {
+                title: 'Aggro',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'a', name: 'A' }] }]
+            },
+            {
+                title: 'Buff',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'b', name: 'B' }] }]
+            },
+            {
+                title: 'Bot',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'b', name: 'B' }] }]
+            },
+            {
+                title: 'Cooldown',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'c', name: 'C' }] }]
+            },
+            {
+                title: 'Carry',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'c', name: 'C' }] }]
+            },
+            {
+                title: 'Debuff',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'd', name: 'D' }] }]
+            },
+            {
+                title: 'DPS',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'd', name: 'D' }] }]
+            },
+            {
+                title: 'Experience',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'e', name: 'E' }] }]
+            },
+            {
+                title: 'Farm',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'f', name: 'F' }] }]
+            },
+            {
+                title: 'Gank',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'g', name: 'G' }] }]
+            },
+            {
+                title: 'Heal',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'h', name: 'H' }] }]
+            },
+            {
+                title: 'Jungle',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'j', name: 'J' }] }]
+            },
+            {
+                title: 'KDA',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'k', name: 'K' }] }]
+            },
+            {
+                title: 'Lane',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'l', name: 'L' }] }]
+            },
+            {
+                title: 'Multikill',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'm', name: 'M' }] }]
+            },
+            {
+                title: 'Nerf',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'n', name: 'N' }] }]
+            },
+            {
+                title: 'Objective',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'o', name: 'O' }] }]
+            },
+            {
+                title: 'Pentakill',
+                categories: [{ name: 'advanced-category', items: [{ slug: 'p', name: 'P' }] }]
+            },
+            {
+                title: 'Quest',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'q', name: 'Q' }] }]
+            },
+            {
+                title: 'Respawn',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'r', name: 'R' }] }]
+            },
+            {
+                title: 'Support',
+                categories: [{ name: 'advanced-category', items: [{ slug: 's', name: 'S' }] }]
+            },
+            {
+                title: 'Tank',
+                categories: [{ name: 'glossary-category', items: [{ slug: 't', name: 'T' }] }]
+            },
+            {
+                title: 'Ultimate',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'u', name: 'U' }] }]
+            },
+            {
+                title: 'Vision',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'v', name: 'V' }] }]
+            },
+            {
+                title: 'Wave',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'w', name: 'W' }] }]
+            },
+            {
+                title: 'XP',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'x', name: 'X' }] }]
+            },
+            {
+                title: 'Yolo',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'y', name: 'Y' }] }]
+            },
+            {
+                title: 'Zoning',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'z', name: 'Z' }] }]
+            },
+            // Additional terms
+            {
+                title: 'ADC',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'a', name: 'A' }] }]
+            },
+            {
+                title: 'AoE',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'a', name: 'A' }] }]
+            },
+            {
+                title: 'Backdoor',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'b', name: 'B' }] }]
+            },
+            {
+                title: 'CC',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'c', name: 'C' }] }]
+            },
+            {
+                title: 'Cheese',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'c', name: 'C' }] }]
+            },
+            {
+                title: 'Draft',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'd', name: 'D' }] }]
+            },
+            {
+                title: 'Engage',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'e', name: 'E' }] }]
+            },
+            {
+                title: 'Feed',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'f', name: 'F' }] }]
+            },
+            {
+                title: 'First Blood',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'f', name: 'F' }] }]
+            },
+            {
+                title: 'GG',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'g', name: 'G' }] }]
+            },
+            {
+                title: 'Harass',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'h', name: 'H' }] }]
+            },
+            {
+                title: 'Initiate',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'i', name: 'I' }] }]
+            },
+            {
+                title: 'Kiting',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'k', name: 'K' }] }]
+            },
+            {
+                title: 'Leash',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'l', name: 'L' }] }]
+            },
+            {
+                title: 'Meta',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'm', name: 'M' }] }]
+            },
+            {
+                title: 'Outplay',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'o', name: 'O' }] }]
+            },
+            {
+                title: 'Peel',
+                categories: [{ name: 'advanced-category', items: [{ slug: 'p', name: 'P' }] }]
+            },
+            {
+                title: 'Roam',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'r', name: 'R' }] }]
+            },
+            {
+                title: 'Snowball',
+                categories: [{ name: 'advanced-category', items: [{ slug: 's', name: 'S' }] }]
+            },
+            {
+                title: 'Split Push',
+                categories: [{ name: 'advanced-category', items: [{ slug: 's', name: 'S' }] }]
+            },
+            {
+                title: 'Tilt',
+                categories: [{ name: 'glossary-category', items: [{ slug: 't', name: 'T' }] }]
+            },
+            {
+                title: 'Trade',
+                categories: [{ name: 'glossary-category', items: [{ slug: 't', name: 'T' }] }]
+            },
+            {
+                title: 'Wombo Combo',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'w', name: 'W' }] }]
+            },
+            {
+                title: 'Zone',
+                categories: [{ name: 'glossary-category', items: [{ slug: 'z', name: 'Z' }] }]
+            }
+        ]}
+        placeholder="What are you looking for?"
+    />
+)
+Basic.parameters = {
+  backgrounds: {
+    default: 'glossary-bg',
+    values: [{ name: 'glossary-bg', value: '#33052F' }]
+  }
+}

package/src/components/organisms/Glossary/Glossary.themes.ts

@@ -0,0 +1,27 @@
+import { colors } from '@/styles/variables'
+import styled from 'styled-components'
+
+export const StyledGlossary = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+`
+
+export const StyledGlossaryHeader = styled.div``
+
+export const StyledGlossaryTitle = styled.h1`
+    color: ${colors.primary50};
+`
+
+export const StyledGlossarySubtitle = styled.h4``
+
+export const StyledGlossaryIndex = styled.div``
+
+export const StyledGlossaryCategories = styled.div`
+width: 100%;
+`
+
+export const StyledGlossarySeparator = styled.div``
+
+export const StyledGlossaryCategoryItems = styled.li``