crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-18 15:36:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: hardcode tab sort for now on plps

Browse Source 
Signed-off-by: jrphilo <james.philo@me.com>
This commit is contained in:
jrphilo 2024-07-11 11:42:34 +02:00
parent a76dfd6c7d
commit 236fb3d4a7
No known key found for this signature in database
GPG Key ID: A8BAD7933F97046F
1 changed files with 31 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
components/plp/tabs.tsx
View File

@ -5,6 +5,26 @@ import { getMetaobject } from 'lib/shopify';
import startCase from 'lodash.startcase'; import startCase from 'lodash.startcase';
import { Tab, TabGroup, TabList, TabPanel, TabPanels } from './tab-components'; import { Tab, TabGroup, TabList, TabPanel, TabPanels } from './tab-components';
const keySort: { [key: string]: number } = {
title: 1,
about: 2,
upgrades: 3,
history: 4,
compatability: 5,
remanufactured_transmissions: 6,
remanufactured_engines: 7,
used_transmissions: 8,
used_engines: 9,
core_return_policy: 10,
shipping: 11,
remanufactured_transmission_warranty: 12,
remanufactured_engine_warranty: 13,
used_transmission_warranty: 14,
used_engine_warranty: 15,
faqs: 16,
best_price_guarantee: 17
};
const TabContent = async ({ id }: { id?: string }) => { const TabContent = async ({ id }: { id?: string }) => {
if (!id) { if (!id) {
return null; return null;
@ -31,11 +51,20 @@ const Tabs = ({ fields }: { fields: { [key: string]: string } }) => {
const isShopifyId = (value?: string) => value?.startsWith('gid://shopify'); const isShopifyId = (value?: string) => value?.startsWith('gid://shopify');
const sortedKeys = keys.sort((a, b) => {
const orderA = keySort[a] ?? Infinity;
const orderB = keySort[b] ?? Infinity;
if (orderA === orderB) {
return a.localeCompare(b);
}
return orderA - orderB;
});
return ( return (
<TabGroup vertical> <TabGroup vertical>
<div className="flex w-full gap-x-10"> <div className="flex w-full gap-x-10">
<TabList className="flex shrink-0 basis-1/4 flex-col gap-2"> <TabList className="flex shrink-0 basis-1/4 flex-col gap-2">
{keys.map((key) => ( {sortedKeys.map((key) => (
<Tab <Tab
key={key} key={key}
className="flex items-center justify-between rounded-sm bg-gray-200/60 p-3 text-left text-sm font-medium text-content-strong focus:outline-none focus:ring-0 data-[selected]:bg-primary data-[selected]:text-white" className="flex items-center justify-between rounded-sm bg-gray-200/60 p-3 text-left text-sm font-medium text-content-strong focus:outline-none focus:ring-0 data-[selected]:bg-primary data-[selected]:text-white"
@ -46,7 +75,7 @@ const Tabs = ({ fields }: { fields: { [key: string]: string } }) => {
))} ))}
</TabList> </TabList>
<TabPanels className="flex basis-3/4"> <TabPanels className="flex basis-3/4">
{keys.map((key) => ( {sortedKeys.map((key) => (
<TabPanel className="flex min-w-full flex-col space-y-5" key={key}> <TabPanel className="flex min-w-full flex-col space-y-5" key={key}>
{isShopifyId(fields[key]) ? ( {isShopifyId(fields[key]) ? (
<TabContent id={fields[key]} /> <TabContent id={fields[key]} />